Integration von simple_form mit Bootstrap 3

Question

Ich habe Bootstrap auf Version 3 aktualisiert. Alles funktioniert gut, außer die Formulare, die von Simple_form gem generiert werden. Ich weiß nicht, wie ich diese beiden zusammen integrieren könnte. Ich finde auch keinen nützlichen Vorschlag im github Projekt-Repository. Hat also jemand eine Lösung für mich?

Answer 1

Es gibt hier einen Blogbeitrag http://stabco.tumblr.com/post/59760641051/simple-form-bootstrap3-integration, der aussieht wie eine gute Lösung. Es aktualisiert die initializer 3.

Answer 2

Dieser Kern Bootstrap passen sehr hilfreich für mich war:

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

Dank!

Answer 3

Sie müssen eine Bootstrap-spezifische simple_form-Einstellung erstellen, indem Sie in Config/Initializers einen Initialisierer erstellen und mit dem folgenden Inhalt füllen.

# 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

Das einfache Formular 3.1.0.rc1 wurde gerade veröffentlicht, das Ihre Integrationsprobleme lösen sollte. Sehen Sie den Blog-Beitrag darüber auf http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/, oder sehen Sie sich einfach das neueste Simple Form for Bootstrap an: http://simple-form-bootstrap.plataformatec.com.br/.

Also, wenn Sie Ihr einfaches Formular auf diese Version aktualisieren, sollten Sie gut sein.

Answer 5

Gute Nachrichten für alle: Stand April 2014, Bootstrap 3 integration is more fully supported, mit zusätzlichen Wrappern in einer neuen Version.

Wir haben gerade Einfaches Formular 3.1.0.rc1 mit Unterstützung freigegeben zu Bootstrap 3. es möglich zu machen, nivelliert wir den Wrapper-API, um es mehr erweiterbar zu machen und Entwickler zu erlauben es, direkt anstatt zu konfigurieren von sich auf den globalen Staat verlassen. Nach einem solchen Verbesserungen, war es sehr einfach, die einfache Form Konfiguration Arbeit mit Bootstrap 3. können

Sie haben die neue Funktionalität hier in Aktion durch einen Beispiel-App sehen sich ändern: http://simple-form-bootstrap.plataformatec.com.br/