將simple_form與bootstrap 3集成

Question

我已經將bootstrap更新到版本3.除了由simple_form gem生成的表單外，一切正常。 我不知道如何將這兩者結合在一起。 我在github項目存儲庫中找不到任何有用的建議。 那么有人為我提供解決方案嗎？

Answer 1

這里有一篇博客文章http://stabco.tumblr.com/post/59760641051/simple-form-b​​ootstrap3-integration看起來是一個很好的解決方案。 它更新初始化程序以適應bootstrap 3。

Answer 2

這個要點對我很有幫助：

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

謝謝！

Answer 3

簡單形式3.1.0.rc1剛剛發布，應解決您的集成問題。 請參閱http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/上關於它的博客文章，或者在這里查看最新的Bootstrap簡單表單： http：/ /simple-form-b​​ootstrap.plataformatec.com.br/ 。

因此，如果您將簡單表單​​更新為此版本，那么您應該很好。

Answer 4

您需要通過在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

Answer 5

每個人都好消息：截至2014年4月， Bootstrap 3集成得到了更全面的支持 ，在新版本中提供了額外的包裝器。

我們剛剛發布了Simple Form 3.1.0.rc1並支持Bootstrap 3.為了實現這一點，我們對Wrapper API進行了擴展，使其更具可擴展性，並允許開發人員直接配置它而不是依賴於全局狀態。 經過這些改進之后，很容易將Simple Form配置更改為與Bootstrap 3一起使用。

您可以在此處通過示例應用程序查看新功能： http ： //simple-form-b​​ootstrap.plataformatec.com.br/