Rails：使用simple_form并集成Twitter Bootstrap

我正在尝试构建一个rails应用程序，而simple_form看起来是一个非常有用的gem。 问题是我使用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

简单forms2.0是引导程序感知：

 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

我写了一个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”类。）。
nb这是在2011年7月25日添加的，因此很多现有的下载和文档都没有。 您也可以将它包装在指定样式的div中。

您也可以使用代码来设置单个元素的样式

<%= f.input :username, :label_html => { :class => '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| %> 
 
<%= controller.action_name.capitalize %> Product
 <%= f.input :name %> <%= f.input :price %> 
 <%= f.submit nil, :class => 'btn btn-primary' %> <%= link_to 'Cancel', products_path, :class => 'btn' %> 
 
 <% end %>