6

我正在将我的网站转换为 Twitter Bootstrap 3，并且遇到了看起来很愚蠢的问题，但我无法通过谷歌找到一个简单的解决方案。

如何在 Rails 表单助手中默认填充 class="form-control"？我只能通过明确输入来做到这一点，这似乎是在浪费时间。（以下）

bootstrap 需要对输入进行样式设置。

 <%= f.label :email %>                                     
 <%= f.text_field :email, class: "form-control" %>

我是否天真地认为 Rails 应该仅仅因为 bootstrap 实现了它就添加了这个功能？

4

5 回答 5

10

是的，这可以在不改变您使用 Rails 表单助手的方式的情况下完成。如果选项中尚未包含类名，您可以扩展表单助手以包含类名。

注意：您必须覆盖FormTagHelper要扩充的每个方法。这只会增加text_field_tag.

将这样的内容添加到您的ApplicationHelper：

module ApplicationHelper

  module BootstrapExtension
    FORM_CONTROL_CLASS = "form-control"

    # Override the 'text_field_tag' method defined in FormTagHelper[1]
    #
    # [1] https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/form_tag_helper.rb
    def text_field_tag(name, value = nil, options = {})
      class_name = options[:class]
      if class_name.nil?
        # Add 'form-control' as the only class if no class was provided
        options[:class] = FORM_CONTROL_CLASS
      else
        # Add ' form-control' to the class if it doesn't already exist
        options[:class] << " #{FORM_CONTROL_CLASS}" if
          " #{class_name} ".index(" #{FORM_CONTROL_CLASS} ").nil?
      end

      # Call the original 'text_field_tag' method to do the real work
      super
    end
  end

  # Add the modified method to ApplicationHelper
  include BootstrapExtension

end
于 2013-09-17T07:53:27.077 回答
4

要将类添加到所有表单元素，即使这些表单元素是由 simple_form 之类的 gem 生成的，也必须在比ApplicationController. 下面的代码片段可以放在一个初始化器中来做到这一点：

require 'action_view/helpers/tags/base'
# Most input types need the form-control class on them.  This is the easiest way to get that into every form input
module BootstrapTag
  FORM_CONTROL_CLASS = 'form-control'
  def tag(name, options, *)
    options = add_bootstrap_class_to_options options, true if name.to_s == 'input'
    super
  end

  private

  def content_tag_string(name, content, options, *)
    options = add_bootstrap_class_to_options options if name.to_s.in? %w(select textarea)
    super
  end

  def add_bootstrap_class_to_options(options, check_type = false)
    options = {} if options.nil?
    options.stringify_keys!
    if !check_type || options['type'].to_s.in?(%w(text password number email))
      options['class'] = [] unless options.has_key? 'class'
      options['class'] << FORM_CONTROL_CLASS if options['class'].is_a?(Array) && !options['class'].include?(FORM_CONTROL_CLASS)
      options['class'] << " #{FORM_CONTROL_CLASS}" if options['class'].is_a?(String) && options['class'] !~ /\b#{FORM_CONTROL_CLASS}\b/
    end
    options
  end
end

ActionView::Helpers::Tags::Base.send :include, BootstrapTag
ActionView::Base.send :include, BootstrapTag
于 2013-11-21T20:30:02.623 回答
1

是的，这是浪费时间。

使用与 Bootstrap 完美集成的simple_form gem 。您不再需要编写这些。

捆绑后，只需运行

rails generate simple_form:install --bootstrap

然后将添加一个 simple_form 初始化程序。您可以在 initializers/simple_form_bootstrap 中进一步自定义它，尽管默认值已经足够了。

所有这些辅助类都会自动生成，以及许多其他好东西。

于 2013-09-17T03:57:13.107 回答
1

您可以使用与 Bootstrap 相关的 Gem 之一，例如：

https://github.com/stoset/twitter_bootstrap_form_for

或者这个：

https://github.com/sethvargo/bootstrap_forms

于 2013-09-17T03:58:48.857 回答
0

前两个答案确实可以很好地工作（使用您自己的初始化程序的简单表单或使用引导表单 gems）。与代码中的任何内容一样，有很多方法可以给猫剥皮。另一种（更手动的）方法是添加您自己的表单助手。步骤基本上是：

  1. 创建一个帮助文件，例如app/helpers/custom_form_helper.rb
  2. 从表单构建器类继承：CustomFormBuilder < ActionView::Helpers::FormBuilder

  3. 创建您想要的外观。

    def text_field(label, *args)
  options = args.extract_options!
  new_class = options[:class] || "form-control"
  super("dd", label, *(args << options.merge(:class => new_class)))
end

  4. 在应用程序中调用您的辅助方法，这样您就不必在每次调用表单时都包含辅助方法，例如：

    def custom_form_for(name, *args, &block)
  options = args.extract_options!
  content_tag("div",
  content_tag("dl", form_for(name, *(args << options.merge(:builder => CustomFormBuilder)), &block)), :class => "standard_form")
end

  5. 在表单中使用自定义表单作为custom_form_for

于 2013-09-17T04:32:45.583 回答