Я новичок в 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')));
Кажется, это то, что вы ищете. 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>
Я все еще изучаю обе структуры, поэтому с этим могут возникнуть проблемы. Надеюсь, что это поможет.