simple_form与bootstrap 3的集成

我已经将bootstrap更新到版本3.除了由simple_form gem生成的表单外,一切正常。 我不知道如何将这两者结合在一起。 我在github项目存储库中找不到任何有用的建议。 那么有人为我提供解决方案吗?

这里有一篇博客文章http://stabco.tumblr.com/post/59760641051/simple-form-b​​ootstrap3-integration看起来是一个很好的解决方案。 它会更新初始化程序以适应bootstrap 3。

这个要点对我很有帮助:

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

谢谢!

简单forms3.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/ 。

因此,如果您将简单表单​​更新为此版本,那么您应该很好。

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

大家好消息:截至2014年4月, Bootstrap 3集成得到了更全面的支持 ,在新版本中提供了额外的包装器。

我们刚刚发布了Simple Form 3.1.0.rc1并支持Bootstrap 3.为了实现这一点,我们对Wrapper API进行了扩展,使其更具可扩展性,并允许开发人员直接配置它而不是依赖于全局状态。 经过这些改进之后,很容易将Simple Form配置更改为与Bootstrap 3一起使用。

您可以在此处通过示例应用程序查看新function: http : //simple-form-b​​ootstrap.plataformatec.com.br/