Question

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

复选框：

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(2);
    -webkit-transform-origin: 0 0;
}

单选：

<label class="c-input c-checkbox">
  <input type="checkbox">
  <span class="c-indicator"></span>
  Check this custom checkbox
</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的表单元素替换元素。

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

1 个答案: