twitter-bootstrap Rails：使用 simple_form 并集成 Twitter Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7198109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rails: Using simple_form and integrating Twitter Bootstrap
提问by devinross
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.
我正在尝试构建一个 rails 应用程序，而 simple_form 看起来是一个非常有用的 gem。问题是我使用 twitter bootstrap css 来做样式，而 simple_form 不允许你指定 html 的布局。
Can anyone tell me how I can conform the simple_form html into the format bootstrap css wants?
谁能告诉我如何使 simple_form html 符合 bootstrap css 想要的格式？
回答by robinst
Note: This answer only applies to SimpleForm < 2.0
注意：此答案仅适用于 SimpleForm < 2.0
Start with this in config/initializers/simple_form.rb:
从这个开始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.
可能还有更多，但这是一个开始。
回答by clyfe
Simple form 2.0 is bootstrap-aware:
简单形式 2.0 是引导程序感知的：
rails generate simple_form:install --bootstrap
回答by Yuki Nishijima
I recently had the same problem and tried out the combination of bootstrap-sassand formtastic-bootstrap. It works with the exactly same code as the code for formtastic and shows even error messages as expected.
我最近遇到了同样的问题，并尝试了bootstrap-sass和formtastic-bootstrap 的组合。它使用与 formtastic 的代码完全相同的代码，甚至按预期显示错误消息。
bootstrap-sassalso works with Rails 3.1 Asset Pipeline and Rails 3.0. formtastic-bootstrapis tested with RSpec so I think this is a nice way to go!
bootstrap-sass也适用于 Rails 3.1 Asset Pipeline 和 Rails 3.0。formtastic-bootstrap使用 RSpec 进行了测试，所以我认为这是一个不错的方法！
回答by Stephen Touset
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.
我写了一个 gem 来做到这一点。它不是 simple_form，但它应该可以并排运行：twitter_bootstrap_form_for。
回答by Michael Durrant
simple_form allows for a css class (Passing in :html => {:class => nil}will result in only a "simple_form" class.).
n.b. 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.
simple_form 允许使用 css 类（:html => {:class => nil}传入只会产生一个“simple_form”类。）。
nb 这是在 2011 年 7 月 25 日添加的，因此许多现有的下载和文档都没有它。您也可以将其包装在指定样式的 div 中。
You can also always style an individual element with code such as
您还可以始终使用代码设置单个元素的样式，例如
<%= f.input :username, :label_html => { :class => 'my_class' } %>
<%= f.input :username, :label_html => { :class => 'my_class' } %>
回答by James McKinney
Here's the full config (config/initializers/simple_form.rb):
这是完整的配置（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
回答by woto
I found this, seems working fine https://github.com/rafaelfranca/simple_form-bootstrapdon't known about tight integration
我发现这个，似乎工作正常https://github.com/rafaelfranca/simple_form-bootstrap不知道紧密集成
回答by Alberto
If you use SimpleForm 1.5 the authors of the gem provide you with the required configuration instructions here: https://github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-integration
如果您使用 SimpleForm 1.5，gem 的作者会在此处为您提供所需的配置说明：https: //github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-integration
回答by Benjamin Crouzier
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).
在此 railscast：http://railscasts.com/episodes/329-more-on-twitter-bootstrap 中，您可以看到如何使用 twitter bootstrap 自定义 simple_form（跳至 3:05）。
terminal :
终端 ：
rails g simple_form:install --bootstrap
model/_form.html.erb :
模型/_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 %>
