CakePHP с Bootstrap (из Твиттера) - PullRequest
Новая
       11

CakePHP с Bootstrap (из Твиттера)

11 голосов
/ 08 ноября 2011

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

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

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

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

Спасибо!: D

Ответы [ 4 ]

13 голосов
/ 08 ноября 2011

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

6 голосов
/ 24 марта 2012

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

3 голосов
/ 09 ноября 2011

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

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

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

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

2 голосов
/ 26 мая 2013

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

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

https://github.com/slywalker/TwitterBootstrap

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

Может 'это становится проще:)

...