web-dev-qa-db-ja.com

simple_formとbootstrap 3

bootstrapをバージョン3に更新しました。simple_formgemによって生成されたフォームを除いて、すべて正常に動作します。これら2つを統合する方法がわかりません。何も見つかりません。 githubプロジェクトリポジトリでも役立つ提案があります。誰かが私のための解決策を持っていますか？

ruby-on-railstwitter-bootstrapsimple-formtwitter-bootstrap-3
15
Amir Hoseinian

ここにブログ投稿があります http://stabco.tumblr.com/post/59760641051/simple-form-b​​ootstrap3-integration これは良い解決策のようです。 bootstrap 3に合うように初期化子を更新します。

14
Edward

この要点は私にとって非常に役に立ちました：

https://Gist.github.com/tokenvolt/6599141

ありがとう！

11
codenoob

統合の問題を解決する簡単なフォーム3.1.0.rc1がリリースされました。 http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/ のブログ投稿を参照するか、最新のシンプルフォームを参照してください。 for Bootstrap here： http://simple-form-b​​ootstrap.plataformatec.com.br/ 。

したがって、単純なフォームをこのバージョンに更新すれば、問題はないはずです。

3
Fritzz

Config/initializersでイニシャライザーを作成し、以下のコンテンツを入力して、bootstrap固有のsimple_form設定を作成する必要があります。

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.wrappers :bootstrap, tag: 'div', class: 'control-group', error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

  config.wrappers :prepend, tag: 'div', class: "control-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
        prepend.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  config.wrappers :append, tag: 'div', class: "control-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-append' do |append|
        append.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  # Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
  # Check the Bootstrap docs (http://Twitter.github.com/bootstrap)
  # to learn about the different styles for forms and inputs,
  # buttons and other elements.
  config.default_wrapper = :bootstrap
end
1
Boti

皆さんに朗報です。2014年4月の時点で、 Bootstrap 3統合がより完全にサポートされています 、新しいリリースで追加のラッパーが提供されています。

Bootstrap 3.をサポートするSimpleForm 3.1.0.rc1をリリースしました。これを可能にするために、Wrapper APIをレベルアップして拡張性を高め、代わりに開発者が直接構成できるようにしました。このような改善の後、Bootstrap 3で動作するようにSimpleForm構成を変更するのは非常に簡単でした。

こちらのサンプルアプリで新機能の動作を確認できます： http://simple-form-b​​ootstrap.plataformatec.com.br/

0
Dan Bartlett