Integrazione di simple_form con bootstrap 3

Question

Ho aggiornato il bootstrap alla versione 3. Tutto funziona bene tranne i moduli generati da gemma simple_form. Non so come potrei integrare questi due insieme. Non riesco a trovare alcun suggerimento utile nel repository del progetto github. Quindi qualcuno ha una soluzione per me?

Answer 1

C'è un post sul blog qui http://stabco.tumblr.com/post/59760641051/simple-form-bootstrap3-integration che sembra una buona soluzione. Si aggiorna l'inizializzatore per soddisfare bootstrap 3.

Answer 2

Questa sostanza è stato molto utile per me:

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

Grazie!

Answer 3

È necessario creare un'impostazione simple_form specifica di bootstrap creando un inizializzatore in config/initializers e popolando con il contenuto sottostante.

# 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

È stato appena rilasciato il modulo 3.1.0.rc1 che dovrebbe risolvere i problemi di integrazione. Vedere il post del blog su di esso su http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/, o semplicemente vedere l'ultimo Simple Form per Bootstrap qui: http://simple-form-bootstrap.plataformatec.com.br/.

Quindi, se si aggiorna il modulo semplice a questa versione, si dovrebbe essere buono.

Answer 5

Buone notizie a tutti: a partire da aprile 2014, Bootstrap 3 integration is more fully supported, con wrapper extra forniti in una nuova versione.

Abbiamo appena rilasciato semplice forma 3.1.0.rc1 con il supporto per il Bootstrap 3. Per renderlo possibile, abbiamo livellato l'API Wrapper per renderlo più estensibile e per consentire agli sviluppatori di configurare direttamente invece di basandosi sullo stato globale. Dopo tali miglioramenti, è stato molto facile per modificare la configurazione semplice modulo per lavoro con Bootstrap 3.

Potete vedere le nuove funzionalità in azione con un esempio applicazione qui: http://simple-form-bootstrap.plataformatec.com.br/