ruby-on-rails - simple_form 与 bootstrap 3 的集成

Question

我已将引导程序更新到版本 3。除了由 simple_form gem 生成的表单外，一切正常。我不知道如何将这两者结合在一起。我在 github 项目存储库中也找不到任何有用的建议。那么有人对我有解决方案吗？

Answer 1

这里有一篇博客文章http://stabco.tumblr.com/post/59760641051/simple-form-b​​ootstrap3-integration看起来是一个很好的解决方案。它更新初始化程序以适应引导程序 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 中创建初始化程序并填充以下内容来创建引导程序特定的 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 集成，新版本中提供了额外的包装器。

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

您可以通过此处的示例应用程序查看正在运行的新功能：http ://simple-form-b​​ootstrap.plataformatec.com.br/