ruby-on-rails-3.2 - シンプルなフォームとブートストラップ 3

Question

input_html: {class: 'form-control'}Bootstrap の最新の変更により、共通の css クラスをすべての要素に適用したいと思いますが、すべてに対して手動で行う必要はありません。デフォルトでそれを作る方法はありますか？そのための設定が見つかりませんでした。

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