将 CSS 类添加到 <%= f.submit %>答案

【问题标题】：Add a CSS class to <%= f.submit %>将 CSS 类添加到 <%= f.submit %>
【发布时间】：2011-07-16 00:24:00
【问题描述】：

我的问题很简单：

<%= f.submit %>

类声明去哪里了？我在多次尝试时都遇到错误。

【问题讨论】：

【解决方案1】：

<%= f.submit 'name of button here', :class => 'submit_class_name_here' %>

这应该可以。如果您遇到错误，很可能是您没有提供名称。

或者，您可以在没有类的情况下设置按钮样式：

form#form_id_here input[type=submit]

也试试。

【讨论】：

太棒了！谢谢斯尔詹。有点好奇——我试过在这些提交按钮上使用disable_with，但它们似乎从来没有用过。你知道这是有原因的吗？ +1
尝试使用哈希选项：{:class=> 'class_name', :disable_with => 'Editing...' }。这将在按钮名称之后。它应该可以工作，或者至少它是这样记录的。
请注意，您需要将字符串（'此处的按钮名称'）作为第一个参数显式传递给submit，以便使用 :class 哈希，如上面的答案所示。如果您没有该字符串，您将收到一条错误消息。
在此处添加类而不删除默认值答案stackoverflow.com/questions/8811254/…
<%= form.submit :class => 'class_name' %> 有效，如果您不想使用名称。

【解决方案2】：

您可以通过执行以下操作将类声明添加到表单的提交按钮：

<%= f.submit class: 'btn btn-default' %>

如果您要更改脚手架的 _form.html.erb 部分并且您想保留控制器动作之间按钮名称的动态变化，请勿指定名称'name'。

在不指定名称的情况下，根据呈现表单的操作，按钮将获得具有以下名称的.class = "btn btn-default"（引导类）（或您指定的任何.class）：

【讨论】：

尽管投票数少于所选答案，但这是大多数人想要使用的解决方案。
这就是我想要找到的
有用，并且允许添加 HTML 属性（如示例中的“id”或“class”）而不更改默认的 Rails 生成的按钮文本。
IMO 这是最好的答案，因为它保留了基于控制器操作为按钮动态分配文本（“创建”或“更新”）的行为
正如@sixty4bit 所说。应该在翻译文件中设置按钮文本，以便表单可以在不同的控制器操作中重复使用，即“创建评论”与“更新评论”。看到这个答案-stackoverflow.com/a/18255633/5355691

【解决方案3】：

Rails 4 和 Bootstrap 3 “主”按钮

<%= f.submit nil, :class => 'btn btn-primary' %>

产生类似：

【讨论】：

这实际上是最好的，因为为名称指定 nil 保留了助手的默认行为，如果它找到正在创建/显示的对象的实例变量，例如 @person，它将命名相应的按钮（更新 Foo 或创建 Foo）以及 form_for FormBuilder 选择正确的操作。因此，您可以通过这种方式将表单代码提取到部分中并使用它来显示模型对象（如果您希望使用表单来显示它），更新它并创建一个新实例。

【解决方案4】：

正如 Srdjan Pejic 所说，您可以使用

<%= f.submit 'name', :class => 'button' %>

或新的语法：

<%= f.submit 'name', class: 'button' %>

【讨论】：

【解决方案5】：

<%= f.submit "Submit", class: 'btn btn-primary' %>

【讨论】：

【解决方案6】：

默认情况下，Rails 4 使用 'value' 属性来控制可见的按钮文本，所以为了保持标记干净，我会使用

<%= f.submit :value => "Visible Button Text", :class => 'class_name' %>

【讨论】：

【解决方案7】：

它们都有效 <%= f.submit class: "btn btn-primary" %> 和 <%= f.submit "Name of Button", class: "btn btn-primary "%>

【讨论】：