Rails：使用 simple_form 并集成 Twitter Bootstrap

Question

我正在尝试构建一个 Rails 应用程序，并且 simple_form 看起来是一个非常有用的宝石。问题是我使用 twitter bootstrap css 来进行样式设置，而 simple_form 不允许您指定 html 的布局。

谁能告诉我如何将 simple_form html 符合 bootstrap css 想要的格式？

Answer 1

注意：此答案仅适用于 SimpleForm 2.0

从 config/initializers/simple_form.rb 中开始：

SimpleForm.form_class = nil
SimpleForm.wrapper_class = 'clearfix'
SimpleForm.wrapper_error_class = 'error'
SimpleForm.error_class = 'help-inline'

然后标签元素和输入之间缺少空格，您可以使用以下内容添加：

label {
  margin-right: 20px;
}

可能还有更多，但它是开始。

Answer 2

Simple form 2.0 是 bootstrap-aware 的：

rails generate simple_form:install --bootstrap

Answer 3

我最近遇到了同样的问题，并尝试了 bootstrap-sass 和 formtastic-bootstrap。
它使用与 formattastic 代码完全相同的代码，甚至按预期显示错误消息。

bootstrap-sass 还可以与 Rails 3.1 Asset Pipeline 和 Rails 3.0 配合使用。 formtastic-bootstrap 已使用 RSpec 进行测试，因此我认为这是一个不错的方法！

Answer 4

我写了一个 gem 来做到这一点。它不是 simple_form，但它应该可以并行工作：twitter_bootstrap_form_for。

Answer 5

这是完整的配置（config/initializers/simple_form.rb）：

SimpleForm.setup do |config|
  config.hint_class = 'help-block'
  config.error_class = 'help-inline'
  config.wrapper_class = 'clearfix'
  config.wrapper_error_class = 'error'
  config.label_text = lambda { |label, required| "#{label} #{required}" }
  config.form_class = nil
end

Answer 6

simple_form 允许使用 css 类（传入 :html => {:class => nil} 将仅生成一个“simple_form”类。）。
注：这是在 2011 年 7 月 25 日添加的，因此许多现有的下载和文档都没有它。您还可以将其包装在指定样式的 div 中。

代码来设置单个元素的样式

您还可以始终使用诸如<%= f.input :username, :label_html =>; 之类的 。 {：类=> 'my_class' } %>

Answer 7

我发现这个，似乎工作正常https://github.com/rafaelfranca/simple_form-b​​ootstrap不知道紧密集成

Answer 8

如果您使用 SimpleForm 1.5，gem 的作者会在此处为您提供所需的配置说明： https://github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-integration

Answer 9

在此railscast中： http://railscasts.com/episodes/329-more-on -twitter-bootstrap，您可以看到如何使用twitter bootstrap自定义simple_form（跳至3:05）。

终端：

rails g simple_form:install --bootstrap

model/_form.html.erb：

<%= simple_form_for @product, :html => { :class => 'form-horizontal' } do |f| %>
  <fieldset>
    <legend><%= controller.action_name.capitalize %> Product</legend>

    <%= f.input :name %>
    <%= f.input :price %>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
  </fieldset>
<% end %>