CakePHP with Bootstrap (from Twitter)

本文关键字：Twitter from with Bootstrap CakePHP | 更新日期: 2023-09-27

我是CakePHP的新手，我想知道一种方法来使用Boostrap从Twitter与蛋糕相结合的布局。

我主要关心的是使表单助手继续正常工作，因为我认为它使用预配置的CSS类，如果我改变默认的CSS，我想表单助手将停止工作，因为它应该。

我读了这个教程，但它似乎不完整。
使用CakePHP和(twitter)Bootstrap，第1部分

有人这样做过吗?

谢谢!: D

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类的表单元素匹配相当好实际上。

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>

主要区别是在Bootstrap中div外的标签。FormHelper允许您设置自定义类，如array('class' => 'clearfix')。

Bootstrap中的.input类以形式定义。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>

我还在学习这两个框架，所以可能会有问题。

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

下面的插件将"引导"您的当前视图，而无需任何代码/标记更改:

https://github.com/slywalker/TwitterBootstrap

所有你需要做的是别名FormHelper和HtmlHelper，以便所有你现有的调用$this->Form &$this->Html将由插件处理。

再简单不过了