11

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

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

我阅读了本教程，但似乎并不完整。
使用 CakePHP 和 (twitter) Bootstrap 构建 PHP 应用程序，第 1 部分

有人做过吗？

谢谢！:D

4

4 回答 4

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

于 2011-11-08T12:03:18.330 回答
6

这似乎是您正在寻找的。 https://github.com/loadsys/twitter-bootstrap-helper/branches

于 2012-03-24T02:47:14.790 回答
3

我正在为一个应用程序做同样的事情，我发现表单元素的 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类在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>

我仍在学习这两个框架，因此可能存在问题。希望它有所帮助。

于 2011-11-09T07:32:44.087 回答
2

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

以下插件将“Bootstrap-ify”您当前的视图，无需任何代码/标记更改：

https://github.com/slywalker/TwitterBootstrap

您需要做的就是为 FormHelper 和 HtmlHelper 设置别名$this->Form，这样您对&的所有现有调用$this->Html都将由插件处理。

没有比这更容易的了:)

于 2013-05-25T22:24:21.557 回答