CakePHP с Bootstrap (из Twitter)

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

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

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

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

Спасибо!: D

Ответы

Ответ 1

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

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

https://github.com/slywalker/TwitterBootstrap

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

Не может быть проще, чем это:)

Ответ 2

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

Ответ 4

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

Элементы формы бутстрапа 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>

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

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

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