logo标签列表

Rails：使用simple_form和集成Twitter Bootstrap

ruby-on-railssimple-formtwitter-bootstrap
23

我正在尝试构建一个Rails应用程序，而simple_form似乎是一个非常有用的gem。问题在于我正在使用Twitter Bootstrap CSS进行样式设计，而simple_form不允许您指定HTML的布局。

请问有人能告诉我如何将simple_form的HTML格式符合Bootstrap CSS的要求吗？

9个回答
24

注意：本答案仅适用于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;
}

可能还有更多，但这是一个开始。

看起来不错，唯一需要添加的是在与simple_form模板冲突的情况下：config.form_class = nil - jevy
@jevy 谢谢，我已经把它加到我的答案中了。 - robinst
提醒那些正在使用SimpleForm v2的人，一些设置已经更改或不存在了。 - Marco
23

简单表单2.0支持Bootstrap：

rails generate simple_form:install --bootstrap
5
我最近遇到了同样的问题，并尝试了bootstrap-sass和formtastic-bootstrap的组合。
它与formtastic的代码完全相同，可以像预期的那样显示错误消息。

bootstrap-sass 还可用于Rails 3.1资产管道和Rails 3.0。 formtastic-bootstrap 经过RSpec测试，因此我认为这是一个不错的选择！
4
这是否也修改了脚手架生成的表单？ - rtdp
不，脚手架并不是为了好看而存在的。 - Stephen Touset
3
以下是完整的配置文件（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
3

simple_form允许设置CSS类（传入:html => {:class => nil}将只显示"simple_form"类）。
注意：此功能于2011年7月25日添加，因此许多现有的下载和文档将没有此功能。您也可以将其包装在指定样式的div中。

您还可以始终使用以下代码为单个元素设置样式

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

2
2
0
在这个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 %>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接