Question

我正在为btn使用bootstrap，所以在制作div类时我需要这个词。我们如何制作一个btn黄色和另一个蓝色？我尝试使用id执行此操作。我哪里出错了？

谢谢！

_form

<%= button_tag(type: 'submit', class: "btn", id: "2") do %>
  <span class="glyphicon glyphicon-plus"></span>
<% end %>

<%= button_tag(type: 'submit', class: "btn") do %>
  <span class="glyphicon glyphicon-plus"></span>
<% end %>

css.scss

.btn {
background: #446CB3;
  #2 {
   background: black;
  }
border: #000;
border-radius: 8px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
font-size: 15px;
padding: 8px 18px 8px 18px;
text-decoration: none;
}

Answer 1

您的css选择器定位ID为2的元素，该元素是.btn（.btn #2的子元素不正确）。所以改成它：

.btn {
background: #446CB3;

border: #000;
border-radius: 8px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
font-size: 15px;
padding: 8px 18px 8px 18px;
text-decoration: none;
}

#2.btn {
   background: black;
  }

Answer 2

为什么不使用Bootstrap的按钮类？

http://getbootstrap.com/css/#buttons-options

根据您网站的配色方案（例如，您为“主要”颜色设置的颜色），您可以执行以下操作：

class：“btn btn-primary”和class：“btn btn-warning”。然后，您不必更改css中的背景颜色或创建其他ID。

如何为一个班级提供两种不同的颜色？

2 个答案: