带有简单表单的 Bootstrap 4 自定义表单

Question

Bootstrap 4 引入了custom forms 来自定义复选框和单选按钮。这是一种使用简单表单生成以下模板的方法？

复选框：

<label class="c-input c-checkbox">
  <input type="checkbox">
  <span class="c-indicator"></span>
  Check this custom checkbox
</label>

电台：

<label class="c-input c-radio">
  <input id="radio1" name="radio" type="radio">
  <span class="c-indicator"></span>
  Toggle this custom radio
</label>
<label class="c-input c-radio">
  <input id="radio2" name="radio" type="radio">
  <span class="c-indicator"></span>
  Or toggle this other custom radio
</label>

谢谢！

Answer 1

只需将input 替换为form 元素：

<%= simple_form_for :foo do |f| %>

  <label class="c-input c-checkbox">
    <%= f.check_box :bar %>

    <span class="c-indicator"></span>
    Check this custom checkbox
  </label>

<% end %>

会生成：

<label class="c-input c-checkbox">
  <input name="foo[bar]" type="hidden" value="0">
  <input type="checkbox" value="1" name="foo[bar]" id="foo_bar">
  <span class="c-indicator"></span>
  Check this custom checkbox
</label>

检查bootply。

第二个示例也是如此，只需将元素替换为 RoR 的表单元素即可。