Question

生成的HTML需要如下所示：

<div class="control-group">
  <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
</div>

Answer 1

我不知道如何使用自举开关脚本来处理文本字段。尽管如此，有些人可能最终会遇到与标题中提到的问题相同的问题。

您只需复制引导程序包并添加所需的类：

config.wrappers :bootstrap_switch, tag: 'div', class: "control-group", error_class: 'error', boolean_style: :inline do |b|
  b.use :html5
  b.use :placeholder
  b.use :label
  b.wrapper tag: 'div', class: 'controls' do |ba|
    ba.wrapper "switch", tag: 'div', class: 'switch' do |s|
      s.use :input
    end
    ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end
end

这将创建一个嵌套的div，它具有类'switch'（因此可以由脚本设置样式）。这个内包装器有命名空间“switch”，这使我们能够设置一些选项：

f.input :inputField, :wrapper => :bootstrap_switch, :switch_html => { :data => { on: "success", on_label: "<i class='icon-ok icon-white'></i>", off: "warning", off_label: "<i class='icon-remove'></i>" } }

Answer 2

简单表格example application has it以及以下code。

  # custom input switch for boolean
  config.wrappers :custom_boolean_switch, tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.optional :readonly
    b.wrapper :form_check_wrapper, tag: 'div', class: 'custom-control custom-switch' do |bb|
      bb.use :input, class: 'custom-control-input', error_class: 'is-invalid', valid_class: 'is-valid'
      bb.use :label, class: 'custom-control-label'
      bb.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
      bb.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end

用法是

<%= f.input :terms, wrapper: :custom_boolean_switch %>

Answer 3

simple_form内置了一个bootstrap插件。请查看here。

用于Bootstrap交换机的Rails Simple Form Wrapper？

3 个答案: