CakePHP с Bootstrap (из Twitter)

Я новичок в CakePHP, и я хочу узнать, как использовать Boostrap из Twitter в макетах в сочетании с тортом.

Моя основная забота состоит в том, чтобы заставить Form Helper продолжать функционировать нормально, потому что я думаю, что он использует предварительно настроенные классы CSS, и если я изменю css по умолчанию, я предполагаю, что Помощник формы перестанет работать так, как должен.

Я прочитал этот учебник, но он не кажется полным.
Создайте приложение PHP, используя CakePHP и (twitter) Bootstrap, часть 1

Кто-нибудь сделал это?

Спасибо! : D

Все текущие ответы требуют изменений в файлах просмотра.

Следующий плагин будет «Bootstrap-ify» ваших текущих просмотров без изменений кода / разметки:

https://github.com/slywalker/TwitterBootstrap

Все, что вам нужно сделать, это псевдоним FormHelper и HtmlHelper, так что все ваши существующие вызовы $this->Form & $this->Html будут обрабатываться плагином вместо этого.

Не может быть легче, чем это 🙂

CSS является чисто презентационным; как это может повлиять на помощника формы от работы так, как должно быть?

Некоторым классам проверки CSS может потребоваться переработка, а также то, что Cake возвращает при возникновении ошибки.

Вы можете легко изменить выход, используя параметр error :

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

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

Кажется, это то, что вы ищете. https://github.com/loadsys/twitter-bootstrap-helper/branches

Я делаю то же самое для приложения, и я обнаружил, что классы CSS для элементов формы очень хорошо совпадают.

Элементы формы Bootstrap в Twitter выглядят следующим образом:

 <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> 

И FormHelper CakePHP генерирует такие элементы:

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

Основное отличие – ярлык вне div в Bootstrap. FormHelper позволяет устанавливать пользовательские классы, такие как array('class' => 'clearfix') .

Класс .input в Bootstrap определен в forms.less и только устанавливает margin-left: 150px; для перемещения входных сигналов вправо. Если вы не используете этот стиль, вы можете просто добавить margin-right: 20px; вместо <label> .

Код в моем элементе формы заканчивается:

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

… и генерирует элементы, которые были правильно созданы Bootstrap.

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

Я все еще изучаю обе структуры, поэтому с этим могут возникнуть проблемы. Надеюсь, что это поможет.