Rails：使用simple_form并集成Twitter Bootstrap

Question

I'm trying to build a rails app and simple_form looks to be a really useful gem. Problem is that I am using twitter bootstrap css to do the styling and the simple_form doesn't allow you to specify the layout of the html.

Can anyone tell me how I can conform the simple_form html into the format bootstrap css wants?

Answer 1

Note: This answer only applies to SimpleForm < 2.0

Start with this in config/initializers/simple_form.rb :

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

Then there's space missing between the label element and the input, which you can add with this:

label {
  margin-right: 20px;
}

There's probably more, but it's a start.

Answer 2

简单形式2.0是引导感知：

rails generate simple_form:install --bootstrap

Answer 3

I recently had the same problem and tried out the combination of bootstrap-sass and formtastic-bootstrap . It works with the exactly same code as the code for formtastic and shows even error messages as expected.

bootstrap-sass also works with Rails 3.1 Asset Pipeline and Rails 3.0. formtastic-bootstrap is tested with RSpec so I think this is a nice way to go!

Answer 4

I wrote a gem to do exactly this. It's not simple_form, but it should work fine side-by-side: twitter_bootstrap_form_for .

Answer 5

simple_form allows for a css class (Passing in :html => {:class => nil} will result in only a "simple_form" class.).
nb This was added on 7/25/2011 so many existing downloads and documentation will not have it. You could also wrap it in a div that specifies a style.

You can also always style an individual element with code such as

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

Answer 6

Here's the full config (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-b​​ootstrap不知道紧密集成

Answer 8

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

Answer 9

In this railscast: http://railscasts.com/episodes/329-more-on-twitter-bootstrap , you can see how to customize simple_form with twitter bootstrap (skip to 3:05).

terminal :

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