将Bootstrap属性添加到R​​ails简单表单输入

Question

以下表单代码段是一个布尔值，因此被设置为一个复选框：

= form.input :recur, label: "Recurring"

我需要两件事：
1）将其设置为引导按钮而不是复选框 2）添加数据目标和数据切换属性

这是我需要添加到表单中的HTML代码，用于按钮样式和折叠功能，而且我很难找到Simple Form的正确语法（我使用SLIM）：< / p>

<button class="btn btn-default" data-toggle="collapse" data-target="#recurringGift" type="button">
</button>

任何建议都将不胜感激！

Answer 1

1）使用简单表单，您可以将选项传递给输入，标签和包装器。我会将标签设置为使用按钮类，并在输入本身上设置display: none，因为单击标签也会选中复选框。

例如

= f.input_field :some_checkbox, input_html: { style: "display: none"}, label_html: { class: "btn btn-primary"}

更好的是，您可以将复选框放在标签之前，这样您就可以使用:checked伪类来影响标签的样式：

= f.input_field :some_checkbox, input_html: { style: "display: none"}
= f.label :some_checkbox, class: "btn btn-primary"

然后在你的CSS中你可以声明：     输入：选中+标签{background-color：grey; }

例如。 http://codepen.io/anon/pen/doqZyp

2）您可以使用data: {}哈希传递数据属性，例如。

= f.input_field :some_checkbox, input_html: { style: "display: none"}, data: {target: "#recurringGift", toggle: "collapse"}

请注意，您的约定要求数据属性使用连字符来分隔单词（例如data-some-attribute=""），但rails会想要下划线（例如data: {some_attribute: ""}

Answer 2

您应该可以通过将它们添加到选项对象来将它们添加为属性：

= form.input :recur, label => "Recurring", 'data-toggle' => "collapse", 'data-target' => '#recurringGift'

请注意，必须在带有破折号的属性周围使用引号，因为符号中不允许使用它们。还要注意哈希火箭表示法。当键是字符串

时，不能使用冒号表示法