2011-11-08 15 views
11

मैं केकपीएचपी के लिए नया हूं और मैं केक के साथ संयुक्त लेआउट में ट्विटर से बूस्ट्रैप का उपयोग करने का एक तरीका जानना चाहता हूं।बूटस्ट्रैप के साथ केकेपीएचपी (ट्विटर से)

मेरी मुख्य चिंता फॉर्म हेल्पर सामान्य रूप से काम करना जारी रखती है, क्योंकि मुझे लगता है कि यह पूर्व-कॉन्फ़िगर किए गए सीएसएस वर्गों का उपयोग करता है, और यदि मैं डिफ़ॉल्ट सीएसएस बदलता हूं, तो मुझे लगता है कि फॉर्म हेल्पर काम करने से रोक देगा ऐसा करना चाहिए।

मैंने इस ट्यूटोरियल को पढ़ा लेकिन यह पूरा नहीं लगता है।
Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1

क्या किसी ने ऐसा किया है?

धन्यवाद! : डी

उत्तर

2

सभी मौजूदा उत्तरों को दृश्य फ़ाइलों में परिवर्तन की आवश्यकता है।

निम्न प्लग इन किसी भी कोड/मार्कअप बदलाव के बिना अपने वर्तमान दृश्य "बूटस्ट्रैप-ify" होगा:

https://github.com/slywalker/TwitterBootstrap

तुम सब करने की ज़रूरत है alias FormHelper और HtmlHelper है ताकि करने के लिए अपने सभी मौजूदा कॉल $this->Form & $this->Html इसके बजाय प्लगइन द्वारा संभाला जाएगा।

उस से अधिक आसान नहीं हो सकता :)

+0

आपके उत्कृष्ट उत्तर के लिए धन्यवाद! –

13

सीएसएस पूरी तरह प्रस्तुतिकरण है; फॉर्म हेल्पर को काम करने से कैसे प्रभावित कर सकता है?

सीएसएस सत्यापन वर्गों में से कुछ को फिर से काम करने की आवश्यकता हो सकती है और साथ ही जब कोई त्रुटि आती है तो केक वापस लौटाता है।

आप आसानी से error विकल्प का उपयोग कर उत्पादन को संशोधित कर सकते हैं:

$this->Form->input('Model.field', array('error' => array('wrap' => 'span', 
               'class' => 'boostrap-error'))); 

http://book.cakephp.org/view/1401/options-error

+0

आपको बहुत बहुत धन्यवाद! –

+0

यह बिंदु, सत्यापन वर्ग है। XuDing का जवाब एक आदर्श समाधान है। –

+0

यहां देखें: https://github.com/loadsys/twitter-bootstrap-helper –

3

मैं एप्लिकेशन के लिए एक ही बात कर रहा हूँ, और मैं प्रपत्र तत्वों मैच के लिए सीएसएस वर्गों मिल गया है वास्तव में बहुत अच्छी तरह से ऊपर।

ट्विटर की बूटस्ट्रैप प्रपत्र तत्व इस तरह दिखेगा:

<div class="clearfix"> 
    <label for="xlInput">X-Large input</label> 
    <div class="input"> 
    <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" /> 
    </div> 
</div> 

और CakePHP के FormHelper इस तरह के तत्वों को उत्पन्न करता है:

<div class="input text"> 
    <label for="UserName">Name</label> 
    <input name="data[User][name]" type="text" value="" id="UserName" /> 
</div> 

मुख्य अंतर यह है बूटस्ट्रैप में div के बाहर लेबल किया जा रहा है। FormHelper आपको array('class' => 'clearfix') जैसे कस्टम क्लास सेट करने देता है।

बूटस्ट्रैप में .input वर्ग forms.less में परिभाषित किया गया है और केवल margin-left: 150px; सेट सही करने के लिए अधिक जानकारी के स्थानांतरित करने के लिए। यदि आप इस शैली का उपयोग नहीं करते हैं तो आप इसके बजाय margin-right: 20px;<label> जोड़ सकते हैं।

मेरी प्रपत्र तत्व में कोड किया जा रहा समाप्त होता है:

echo $this->Form->input('first_name', array('div' => 'clearfix')); 

... और तत्वों है कि बूटस्ट्रैप द्वारा ठीक से स्टाइल रहे हैं उत्पन्न करता है।

<div class="clearfix required"> 
    <label for="PersonFirstName">First Name</label> 
    <input name="data[Person][first_name]" maxlength="50" type="text" id="PersonFirstName"/> 
</div> 

मैं अभी भी दोनों ढांचे सीख रहा हूं इसलिए इसमें समस्याएं हो सकती हैं। उम्मीद है कि यह मदद करता है हालांकि।

संबंधित मुद्दे