我正在尝试将bootstrap 3与simple_forms（来自master）集成。
现在，我有以下内容：
配置/初始化/ simple_form.rb：
SimpleForm.setup do |config|
config.wrappers :default, class: :input,
hint_class: :field_with_hint, error_class: :field_with_errors do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label_input
b.use :hint, wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }
end
config.default_wrapper = :default
config.boolean_style = :nested
config.button_class = 'btn'
end
配置/初始化/ simple_form_bootstrap.rb：
SimpleForm.setup do |config|
config.input_class = 'form-control'
config.wrappers :bootstrap, tag: 'div', class: 'form-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: "form-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: "form-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
config.default_wrapper = :bootstrap
end
应用/视图/设计/会话/ new.html.haml
%div.panel.panel-auth
%div.panel-heading
%h3.panel-title Sign in
%div.panel-body
= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
.form-inputs
= f.input :email, :required => false, :autofocus => true
= f.input :password, :required => false
= f.input :remember_me, :as => :boolean if devise_mapping.rememberable?
.form-actions
= f.button :submit, "Sign in"
%hr
= render "devise/shared/links"
但是生成的HTML是错误的。嗯，根据BS2，它是正确的，但BS3是错误的。这是：
<div class="form-group boolean optional user_remember_me">
<label class="boolean optional control-label" for="user_remember_me">
Remember me
</label>
<div class="controls">
<input name="user[remember_me]" type="hidden" value="0">
<label class="checkbox">
<input class="boolean optional form-control" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</label>
</div>
</div>
但它实际上应该是这样的：
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
可能有可能解决这个黑客周围的包装，但我不能让它工作。 有人可以给我一些建议吗？
干杯
答案 0 :(得分：12)
就像你说的那样，你可以使用自定义包装器来实现它：
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|
# Form extensions
b.use :html5
# Form components
b.wrapper tag: :label do |ba|
ba.use :input
ba.use :label_text
end
b.use :hint, wrap_with: { tag: :p, class: "help-block" }
b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
end
然后您在输入中引用：
= f.input :remember_me, :as => :boolean, :wrapper => :checkbox if devise_mapping.rememberable?
但请注意，这不适用于collection_check_boxes：
= f.input :roles, as: :check_boxes, wrapper: :checkbox, collection: @employee_roles, label: false
您可以尝试将后一种情况的自定义输入混合在一起，但它有点混乱。也许其他人知道更好的方法......也许simple_form很快就会赶上bootstrap 3.
答案 1 :(得分：2)
下一个配置对我来说非常适合使用bootstrap 3：
SimpleForm.setup do |config|
...
config.boolean_style = :inline
...
end
简单的自定义包装
config.wrappers :inline_checkbox, :tag => 'div', :class => 'checkbox', :error_class => 'has-error' do |b|
b.use :html5
b.use :placeholder
b.use :label_input
end
用法：
= f.input :remember_me, :label => t('user.remember_me'), :as => :boolean, :wrapper => :inline_checkbox
答案 2 :(得分：1)
我找到了一个非常简单的Bootstrap 3复选框解决方案。假设您已经配置了bootstrap 3包装器，我所要做的只是在app/inputs中添加自定义输入checkbox_input.rb：
class CheckboxInput < SimpleForm::Inputs::BooleanInput
# this exists to make the default 'boolean' css class in the form-group to be 'checkbox' instead
end
并通过以下方式使用它：
= f.input :remember_me, :as => :checkbox if devise_mapping.rememberable?
这会将boolean上的css form-group改为checkbox，而是会获得正确的样式。
同样，这是radio-inline
class RadioInlineInput < SimpleForm::Inputs::CollectionRadioButtonsInput
# by default, this omits labels. You should use f.label before this to stick a label where you would like.
def initialize(builder, attribute_name, column, input_type, options = {})
super(builder, attribute_name, column, :radio_buttons, {label: false}.merge(options))
end
def item_wrapper_class
'radio-inline'
end
end
用作：
= f.label :frequency
= f.input :frequency, collection: @membership_plan.interval_frequencies, as: :radio_inline
答案 3 :(得分：0)
在我们等待Rafael实施Bootstrap3时，这是解决复选框问题的快捷方法：https://github.com/wtfiwtz/simple_form_bootstrap3/commits/master
确保将“config.bootstrap3 = true”添加到初始化程序...
答案 4 :(得分：0)
我的复选框有下一个要求：
<div class="checkbox">
<input type="hidden" value="0" name="...">
<label>
<input type="checkbox" value="1" name="..."> Label text
</label>
</div>
隐藏的输入是从标签中提取的，因为它不会检查标签点击上的复选框。我不知道为什么，但我只能使用配置生成这样的HTML，所以这里是配置+自定义输入类
# Config
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|
# Form extensions
b.use :html5
b.use :placeholder
b.use :input
b.use :hint, wrap_with: { tag: :p, class: "help-block" }
b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
end
# Input goes to app/inputs/inline_checkbox_input.rb
class InlineCheckboxInput < SimpleForm::Inputs::Base
def input
out = ''
out << @builder.hidden_field(attribute_name, value: 0).html_safe
out << "<label>"
out << @builder.check_box(attribute_name, {}, 1, nil)
out << "#{options[:label]}</label>"
out
end
end
# Usage
= f.input :name, :label => 'Label text', :wrapper => :checkbox, :as => :inline_checkbox
答案 5 :(得分：0)
你可以使用它：
<%= f.input :remember_me, as: :boolean, :label => false, :inline_label => "Remember me" if devise_mapping.rememberable? %>