2011-11-08 110 views
11

我是CakePHP的新手,我想知道如何使用Boostrap从布局与蛋糕结合的布局。CakePHP与Bootstrap(来自Twitter)

我主要关心的是让Form Helper继续正常工作,因为我认为它使用了预先配置好的CSS类,如果我更改了默认的css,我想象Form Helper将停止工作,因为它应该。

我看过本教程,但它似乎并不完整。
Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1

有没有人这样做?

谢谢! :D

回答

2

当前所有答案都需要更改视图文件。

以下插件将“引导-IFY”当前的看法,并没有任何代码/标记的变化:

https://github.com/slywalker/TwitterBootstrap

所有你需要做的是alias的表单助手和的HtmlHelper,使现有的所有来电$this->Form & $this->Html将由插件处理。

不能比这更容易:)

+0

感谢您的优秀回答! –

13

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

+0

非常感谢! –

+0

这是重点,验证类。 XuDing的答案是一个完美的解决方案。 –

+0

请看这里:https://github.com/loadsys/twitter-bootstrap-helper –

3

我在做同样的事情的应用程序,我已经找到了表单元素匹配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的表单助手产生这样的内容:

<div class="input text"> 
    <label for="UserName">Name</label> 
    <input name="data[User][name]" type="text" value="" id="UserName" /> 
</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> 

我仍然在学习这两个框架,所以可能有这个问题。希望它有帮助。