Question

我正在尝试构建一个rails应用程序，而simple_form看起来是一个非常有用的宝石。问题是我使用twitter bootstrap css来做样式，而simple_form不允许你指定html的布局。

有谁能告诉我如何将simple_form html整合到bootstrap css想要的格式中？

Answer 1

注意：此答案仅适用于SimpleForm＆lt; 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的组合。它使用与formtastic的代码完全相同的代码，并按预期显示错误消息。

bootstrap-sass也适用于Rails 3.1 Asset Pipeline和Rails 3.0。 formtastic-bootstrap已通过RSpec测试，所以我认为这是一个很好的方法！

Answer 4

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

Answer 5

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

您也可以使用

等代码为单个元素设置样式

<%= f.input :username, :label_html => { :class => 'my_class' } %>

Answer 6

这是完整配置（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 7

我发现这一点，似乎工作得很好https://github.com/rafaelfranca/simple_form-bootstrap不知道紧密集成

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 %>

Rails：使用simple_form并集成Twitter Bootstrap

9 个答案: