如何在rails

时间:2016-09-20 12:34:19

标签: html css ruby-on-rails twitter-bootstrap simple-form

我正在使用Rails 4和Simple Form with Bootstrap。

我希望我的复选框不会那样:

<%= c.input :my_bool_field, label: false, class: "form-control" %>

enter image description here

但是类似的东西(我有CSS)

<label class="switch switch-primary">
    <input type="checkbox" />
    <span></span>
</label>

enter image description here

我知道我可以使用simple_form包装器,但我发现它们有点令人困惑。有人可以帮助我创建带有该样式的复选框吗?

4 个答案:

答案 0 :(得分:3)

我发现这个项目非常有用和完整。它基于twitter bootstrap:http://www.bootstraptoggle.com/

嵌入了rails gem

答案 1 :(得分:0)

查看https://github.com/abpetkov/switchery

处找到的Rails Switchery gem

轻松自定义bootstrap和ios样式开关,而无需通过初始化程序或在视图中调用jquery函数来更改simpleforms预构建的包装器。

答案 2 :(得分:0)

只需将复选框放在

<label class="switch switch-primary">
     <%= f.input_field :my_bool_field, label: false, as: :boolean, class: 'form-control' %>
    <span></span>
</label>

答案 3 :(得分:0)

您能否转到此链接并将其检出为“开关”。 getbootstrap.com

enter image description here

我希望这个例子能为您服务,我目前正在使用Bootstrap 4.3和Rails 5.2;

以模型的形式使用“自定义开关”,并且该模型将起作用:

-model / _form.html.erb

<%= form_with(model: employee, local: true) do |form| %>
 <div class="custom-control custom-switch">
    <%= form.check_box :active, class: "custom-control-input", id: "customSwitch1"   %>
  <label class="custom-control-label" for="customSwitch1">Status: </label>
 </div>
 <div class="actions">
     <%= form.submit %>
 </div>
<% end %>

希望对您有所帮助,我是Rails和Bootstrap的新手。

致谢!