twitter-bootstrap simple_form 与 bootstrap 3 的集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18935536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Integration of simple_form with bootstrap 3
提问by Amir Hoseinian
I've updated bootstrap to version 3. Everything works fine except the forms which are generated by simple_form gem. I don't know how could I integrate these two together. I can't find any helpful suggestion in the github project repository either. So does anyone have a solution for me ?
我已将引导程序更新到版本 3。除了由 simple_form gem 生成的表单外，一切正常。我不知道如何将这两者结合在一起。我在 github 项目存储库中也找不到任何有用的建议。那么有人为我提供解决方案吗？
采纳答案by Edward
There's a blog post here http://stabco.tumblr.com/post/59760641051/simple-form-bootstrap3-integrationthat looks like a good solution. It updates the initializer to suit bootstrap 3.
这里有一篇博客文章http://stabco.tumblr.com/post/59760641051/simple-form-bootstrap3-integration看起来是一个很好的解决方案。它更新初始化程序以适应引导程序 3。
回答by codenoob
This gist was very helpful to me:
这个要点对我很有帮助：
https://gist.github.com/tokenvolt/6599141
https://gist.github.com/tokenvolt/6599141
Thanks!
谢谢！
回答by Fritzz
Simple form 3.1.0.rc1 has just been released that should solve your integration problems. See the blog post about it on http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/, or just see the latest Simple Form for Bootstrap here: http://simple-form-bootstrap.plataformatec.com.br/.
刚刚发布的简单表格 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/。
So if you update your simple form to this version, you should be good.
所以如果你将你的简单表单更新到这个版本，你应该会很好。
回答by Boti
You need to create a bootstrap specific simple_form setting by creating an initializer in config/initializers and populating with the below content.
您需要通过在 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
回答by Dan Bartlett
Good news everyone: as of April 2014, Bootstrap 3 integration is more fully supported, with extra wrappers provided in a new release.
大家好消息：截至 2014 年 4 月，Bootstrap 3 集成得到更全面的支持，新版本中提供了额外的包装器。
We just released Simple Form 3.1.0.rc1 with support to Bootstrap 3. To make it possible, we leveled up the Wrapper API to make it more extensible and to allow developers to directly configure it instead of relying on global state. After such improvements, it was very easy to change the Simple Form configuration to work with Bootstrap 3.
我们刚刚发布了支持 Bootstrap 3 的 Simple Form 3.1.0.rc1。为此，我们升级了 Wrapper API 以使其更具可扩展性，并允许开发人员直接配置它而不是依赖全局状态。经过这样的改进，很容易更改 Simple Form 配置以与 Bootstrap 3 一起使用。
You can see the new functionality in action through an example app here: http://simple-form-bootstrap.plataformatec.com.br/
您可以通过此处的示例应用程序查看新功能的实际效果：http: //simple-form-bootstrap.plataformatec.com.br/
