simple_form與bootstrap的集成3

Question

我已經將bootstrap更新爲版本3.除了由simple_form gem生成的表單之外，一切正常。我不知道我怎麼能把這兩者結合在一起。我在github項目資源庫中找不到任何有用的建議。那麼，有沒有人有我的解決方案？

Answer 1

這裏有一個博客文章http://stabco.tumblr.com/post/59760641051/simple-form-bootstrap3-integration，看起來像一個很好的解決方案。它更新初始化，以適應自舉3

Answer 2

這個要點是對我很有幫助：

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

謝謝！

Answer 3

您需要通過在config/initializers中創建初始化程序並填充下面的內容來創建引導程序特定的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/上的博客文章，或者查看最新的簡單形式Bootstrap：http://simple-form-bootstrap.plataformatec.com.br/。

所以，如果你更新你的簡單形式到這個版本，你應該很好。

Answer 5

好消息大家：爲2014年4月，Bootstrap 3 integration is more fully supported，在新版本提供了額外包裝的。

我們剛剛發佈了簡單的表單3.1.0.rc1的支持來引導3. 爲了能夠，我們剷平了包裝API，使其更具可擴展 ，並允許開發者直接進行配置，而不是依靠全球的國家。 經過這樣的改進，這是非常容易簡單形式配置更改爲 工作，引導3

您可以通過一個示例應用在這裏看到工作中的新功能：http://simple-form-bootstrap.plataformatec.com.br/