在 form_tag 中格式化按钮答案

【问题标题】：Format a button in form_tag在 form_tag 中格式化按钮
【发布时间】：2014-09-10 21:26:51
【问题描述】：

我有以下代码：

<% if is_admin? %>
  <%= form_tag(controller: "generalizacoes", action: "destroy_all", method: :post) do %>
    <%= hidden_field_tag :item_id, @item.id %>
    <%= hidden_field_tag :genero_id, genero.id %>
    <%= submit_tag 'x'%>
  <% end -%>
<% end %>

丑到不行

我希望它是这样的

Guerra x（来自 twitter bootstrap 的小删除字形图标）

有可能吗？我该怎么办？

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

我认为您正在寻找类似的东西：

<%= submit_tag('x', class: 'btn btn-default btn-sm') %>

虽然有other bootstrap options for buttons。

您还可以查看button_to，这似乎很适合您的工作：

<%= button_to("X", { controller: "generalizacoes", action: "destroy_all" },
    { params: { item_id: @item.id, genero_id: genero.id },
      class: 'btn btn-default btn-sm' %>

如果是破坏性操作，您可能也需要在其中添加 data: { confirm: 'Are you sure?' }。

【讨论】：

实际上并没有太大变化……它仍然是一个巨大的酒吧，只是更加风格化了。而且我不能像这里一样在其中插入字形图标：<button type="button" class="btn btn-default btn-sm" id="remove-rel-item-genero"> <span class="glyphicon glyphicon-remove"></span> </button>

【解决方案2】：

这不是直接的答案（不是引导程序），但应该为您提供有关如何解决问题的信息

CSS

您可以随意设置输入/提交按钮的样式 - 使用 css。

你可以从我的JSFiddle看到：

.new_button {
    background-color: orange;
    border: 1px solid #000;
    padding: 10px;
    transition: background, 0.2s;
}

.new_button:hover {
    color: #fff;
    background-color: black;
    cursor: pointer;
}

<form action="#">
   <input type="submit" value="Test" class="new_button">
</form>

虽然bootstrap 将包含其自己的类和样式数组，但您必须记住，如果您想为按钮赋予特定的“样式”，您将能够定义和调用各种 CSS 类/样式你定义的。

Shadwell 的回答中提到了这一点 - 您可以通过在其上调用一个类来单独设置按钮的样式，或者，您可以依赖 Bootstrap 本身内部的 form 样式：

#app/assets/stylesheets/application.css
.your_class { 
    background: #ccc;
    border: 1px solid #000;
}

#app/views/controller/your_view.html.erb
<%= form_tag(controller: "generalizacoes", action: "destroy_all", method: :post) do %>
    <%= hidden_field_tag :item_id, @item.id %>
    <%= hidden_field_tag :genero_id, genero.id %>
    <%= submit_tag 'x', class: "your_class" %>
<% end -%>

引导

我必须承认，我以前从未使用过 Bootstrap for CSS。

您将能够在我上面给出的基础上进行构建，方法是使用forms 和buttons 的bootstrap CSS 样式。你可以这样做：

<%= form_tag(controller: "generalizacoes", action: "destroy_all", method: :post) do %>
    <%= hidden_field_tag :item_id, @item.id %>
    <%= hidden_field_tag :genero_id, genero.id %>
    <%= submit_tag 'x', class: "btn btn-default" %>
<% end -%>

【讨论】：

好吧，我想我明白了，但是我还是有问题，静止按钮停留在文本上方，我的意思是，它的宽度和我的列一样大小，我该怎么办到它紧跟在文本之后？