Question

随着Bootstrap的最新更改，我想将常见的css类input_html: {class: 'form-control'}应用于所有元素，但不需要手动执行所有元素。有没有办法默认设置它。我还没有找到任何设置。

Answer 1

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

E.g：

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

使用jQuery（但*对于所有元素都会产生一些性能问题）

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

希望它有所帮助...

Answer 3

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

simple_form_bootstrap.rb Gist

Answer 4

在初始化者的简单使用中：

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

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;
    }

简单的形式和引导3

5 个答案: