シンプルフォームとブートストラップ3の統合

Question

ブートストラップをバージョン3にアップデートしました。シンプルフォームgemで生成されたフォーム以外はすべて正常に動作します。私はこれら2つをどのように統合できるのか分かりません。私はgithubプロジェクトリポジトリにも有益な提案はありません。それで誰も私のための解決策を持っていますか？

Answer 1

http://stabco.tumblr.com/post/59760641051/simple-form-bootstrap3-integrationのブログ記事は良い解決策のようです。これは、この要旨は私にとって非常に有用だったブートストラップ3

Answer 2

に合わせてイニシャライザを更新します。

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

感謝を！

Answer 3

設定/初期化子に初期化子を作成し、以下の内容を入力してブートストラップ固有の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 

Answer 4

単純な形式3.1.0.rc1がリリースされました。これは、統合の問題を解決するはずです。 http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/のブログ記事をご覧ください。または最新のシンプルフォームfor Bootstrapをご覧ください：http://simple-form-bootstrap.plataformatec.com.br/

単純なフォームをこのバージョンに更新すると、良いものになるはずです。

Answer 5

2014年4月現在、Bootstrap 3 integration is more fully supportedとして、新しいリリースで追加のラッパーが提供されています。

我々はそれを可能にするために3 をブートストラップするためのサポートと簡単なフォーム3.1.0.rc1をリリースし、我々は それをより拡張性にするために、開発者が直接それを代わりに設定できるようにするラッパーAPIをレベルアップグローバルな状態に頼っている。 は、そのような改良した後、あなたがここでの例アプリを通じてアクションの新機能を見ることができますブートストラップ3と 仕事に

を簡単なフォームの設定を変更することは非常に簡単でした：http://simple-form-bootstrap.plataformatec.com.br/