simple-form – Bootstrap 3 simple_forms复选框

我试图将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,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,class: "form-group",class: 'controls' do |input|
      input.wrapper tag: 'div',class: 'input-prepend' do |prepend|
        prepend.use :input
      end
      input.use :hint,class: 'help-block' }
      input.use :error,class: 'help-inline' }
    end
  end

  config.wrappers :append,class: 'input-append' do |append|
        append.use :input
      end
      input.use :hint,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>

这可能是解决这个黑客围绕包装器,但我不能让它工作.
有人可以给我一些建议吗？

干杯

解决方法

就像你说的,你可以使用自定义包装器

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,class: "help-block text-danger" }
  end

然后在您的输入中引用它：

= f.input :remember_me,:as => :boolean,:wrapper => :checkBox if devise_mapping.rememberable?

请注意,这不适用于collect_check_Boxes：

= f.input :roles,as: :check_Boxes,wrapper: :checkBox,collection: @employee_roles,label: false

您可以尝试将后一种情况下的自定义输入一起进行黑客攻击,但这有点混乱.也许别人知道一个更好的方法…也许simple_form将赶上足够的bootstrap 3.

原文链接：https://www.f2er.com/bootstrap/234075.html

simple-form – Bootstrap 3 simple_forms复选框

解决方法

猜你在找的Bootstrap相关文章