22

是否有任何兼容 Rails 4 的表单构建器 gem(s) 为 Twitter Bootstrap 3.0.0 表单提供全面支持？

这是我认为“全面”支持的基准：

  • 支持所有 3 种布局（基本、水平、内联）
  • 支持基本输入类型（输入、文本区域、选择等）
  • 支持堆叠和内联复选框/单选按钮
  • 支持所有输入状态（焦点、禁用、验证）
  • 支持帮助文本/错误消息
  • 支持 input-append/prepend（现在在 TWBS3 中称为 input-group）。
  • 支持处理 Rails 的特定表单“元素”，例如 date_select（内联选择框）

有关 TWBS3 表单的详细信息，请参阅 TWBS3文档和WIP github 问题。

我已经查看了simple_form和twitter_bootstrap_form_for，虽然两者都在取得进展，但目前似乎都没有提供足够的解决方案。

简单的模式

似乎有基本布局的解决方案，但据我所知，由于 TWBS3 需要额外的网格标记，目前无法使用水平表单。

https://github.com/plataformatec/simple_form/pull/864 https://github.com/plataformatec/simple_form/issues/857

Twitter 引导表单

这个拉取请求看起来很有希望，但我可以看到正在使用的标记和类有一些不准确之处。

https://github.com/stoset/twitter_bootstrap_form_for/pull/84

4

3 回答 3

7

根据我自己对 Bootstrap 和 simple_form / form_builder 方法的经验，simple_form 不值得麻烦。有太多的事情，简单的形式无法解决布局和控制方面的问题，一些关键的黑点是包装标签上的类，带有 html 属性的选择，或者做一些简单的事情，比如模仿切换/单选按钮的引导按钮组。simple_form 中的 i18n 支持也是一个挑战，需要大量重复。

还要考虑服务器端渲染是否是现代应用程序的正确方法。我正在从传统的 Rails/服务器端渲染过渡到 SPA（单页应用程序）模型。为此，我使用了带有生态模板和咖啡脚本的骨干.js 和牵线木偶。

在架构上，simple_form / rails 表单构建器方法似乎存在缺陷，并且其中包含大量复杂的代码，用于构建 html 字符串片段。

好吧，我说这就是视图模板的用途！

归根结底，视图由许多不同的子视图模板（例如部分）组成，我认为它应该直接下到控制/字段组件。相比之下，构建器方法总是因缺乏对不同 jquery 组件的支持而陷入困境，并且不够灵活，无法跟上步伐。

我建议使用参数化视图模板/部分，为您的应用程序中的每种类型的控件/组件或视图构造编码您想要的标记，并简单地组合它们以获得您想要的布局。如果你在做这个服务器端，你可以用一些助手来包装所有的渲染部分调用，以获得语法上的甜美。如果您在客户端使用生态模板，请检查主页，您将在此处看到定义和调用表单构建模板的示例。

不要将自己锁定在表单构建器的功能中，使用 boostrap 文档示例作为模板的起点，然后简单地调用它们！

于 2013-10-01T00:04:20.857 回答
5

你检查过https://github.com/potenza/bootstrap_form吗？我们刚刚添加了对 Bootstrap 3 的支持，它非常​​轻量级。

我们几乎支持您的所有要求，但我们仍在为日期和时间选择寻找一个好的解决方案，因为它们目前默认堆叠。

这是 erb 中的示例表单：

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

和输出：

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  <div class="form-group">
    <label for="user_email">Email</label>
    <input class="form-control" id="user_email" name="user[email]" type="email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" id="user_password" name="user[password]" type="password">
  </div>
  <div class="checkbox">
    <label for="user_remember_me">
      <input name="user[remember_me]" type="hidden" value="0">
      <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
    </label>
  </div>
  <input class="btn btn-default" name="commit" type="submit" value="Log In">
</form>
于 2013-12-23T22:40:42.863 回答
1

最近尝试过这个，有一些技巧可以让 simple_form 工作，我想说它还没有准备好迎接黄金时段。几周后查看简单表单，同时您可以手动构建标记或使用 simple_form 使用笨拙的表单，直到它更新。

你可以在这里监控它的进度：https ://github.com/rafaelfranca/simple_form-b​​ootstrap/pull/28

于 2013-09-25T11:14:14.853 回答