23

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

谁能告诉我如何将 simple_form html 符合 bootstrap css 想要的格式？

4

9 回答 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;
}

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

于 2011-09-04T17:05:17.683 回答
23

简单形式 2.0 是引导感知的：

rails generate simple_form:install --bootstrap
于 2012-02-24T11:43:44.210 回答
5

我最近遇到了同样的问题，并尝试了bootstrap-sass和formtastic-bootstrap的组合。它使用与 formtastic 的代码完全相同的代码，甚至可以按预期显示错误消息。

bootstrap-sass也适用于 Rails 3.1 资产管道和 Rails 3.0。formtastic-bootstrap使用 RSpec 进行了测试，所以我认为这是一个不错的方法！

于 2011-11-11T08:41:49.937 回答
4

我写了一个宝石来做到这一点。这不是 simple_form，但它应该可以很好地并排工作：twitter_bootstrap_form_for。

于 2011-10-13T04:51:17.397 回答
3

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

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

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

于 2011-08-29T02:04:53.207 回答
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
于 2011-11-12T18:02:08.430 回答
2

我发现这个，似乎工作正常https://github.com/rafaelfranca/simple_form-b​​ootstrap不知道紧密集成

于 2011-11-27T15:34:03.877 回答
2

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

于 2011-12-20T09:49:35.967 回答
0

在这个 railscast：http: //railscasts.com/episodes/329-more-on-twitter-bootstrap中，您可以看到如何使用 twitter bootstrap 自定义 simple_form（跳到 3:05）。

终端 ：

rails g simple_form:install --bootstrap

模型/_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 %>
于 2013-04-13T17:15:51.017 回答