ruby-on-rails-3.2 - 简单的形式和引导程序 3

Question

随着 Bootstrap 的最新更改，我想将通用 css 类input_html: {class: 'form-control'}应用于所有元素，但无需手动为所有元素执行此操作。有什么办法可以默认设置。我还没有找到任何设置。

Answer 1

您最好更改 app/config/initializers 中 simple_form_bootstrap.rb 中的默认包装器。

例如：

SimpleForm.setup do |config|
  config.wrappers :bootstrap, tag: :div, class: "form-group", error_class: "has-error" do |b|

    # Form extensions
    b.use :html5
    b.use :placeholder

    # Form components
    b.use :label
    # b.wrapper tag: :div do |ba|
    b.use :input
    b.use :hint,  wrap_with: { tag: :p, class: "help-block" }
    b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
    # end
  end

  config.form_class = "form-horizontal"
  config.default_wrapper = :bootstrap

end

Answer 2

在简单的 from 初始化程序中使用：

SimpleForm.setup do |config|
  config.label_class = 'control-label'
  ...
end

Answer 3

我使用这个要点来替换 app/config/initializers 中的 simple_form_boostrap.rb。

simple_form_bootstrap.rb 要点

Answer 4

使用 jQuery（但所有元素的 * 可能会导致一些性能问题）

$('*').addClass('form-control');

希望能帮助到你...

Answer 5

正如 Aaron Gong 所说，jQuery 可能是实现这一目标的一种方式。它将节省您手动执行此操作的时间，但它实际上在客户端添加了一个人为步骤，这可能不是最干净的解决方案。

您也可以尝试使用 css 选择器应用 sass @extend ( http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend ) 来选择要修改的输入类型。

例子

    input[type='email'], input[type='password'] {
      @extend .form-control;
    }