引导颜色单个按钮答案

【问题标题】：Bootstrap color individual buttons引导颜色单个按钮
【发布时间】：2015-03-03 23:02:03
【问题描述】：

所以我一直在尝试很多方法来更改引导网站中按钮的颜色。我试过creating a class in the css 并在那里更改背景颜色。我尝试使用 id 更改背景颜色，我尝试覆盖 .btn-primary，但这会更改所有按钮。我有超过 6 个按钮来制作超过 6 种按钮颜色，所以我需要能够在不使用 6 种现有按钮类型的情况下做到这一点。有谁知道我该怎么做？

HTML：

<form action="index.html">
    <button type="submit" class="btn btn-primary btn-lg btn-block home" id="home">
        Home <span class="glyphicon glyphicon-home"></span>
    </button>
</form>

CSS：

.home{
    background-color:#9b59b6;
}

编辑：谢谢大家的回复。他们都是正确的。然而，他们都没有解决这个问题。你知道做了什么吗？删除以某种方式进入我的代码的单独/字符。经验教训：在指责 bootstrap 和 css 之前检查您的代码是否存在其他错误。

【问题讨论】：

一些想法：1）如果你用!important强制你的background-color会发生什么？也许您的定义在定义层次结构中太弱了？ 2) 考虑 LESS 定义，并且您的 CSS 可能会被重写（参见 here，nalply 的评论） 3) 如果您在浏览器中选择“Insepct Element”，您会看到什么？颜色定义究竟来自哪里？

标签： html css twitter-bootstrap button

【解决方案1】：

您可以简单地制作自己的按钮，例如 btn-one btn-two btn-three

样式如下例所示

.btn-one {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-one:hover,
.btn-one:focus,
.btn-one.focus,
.btn-one:active,
.btn-one.active,
.open > .dropdown-toggle.btn-one {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

并将颜色更改为您自己需要的颜色

【讨论】：

【解决方案2】：

您可以像这样为自定义按钮创建新类：

<div class="btn btn-home">Home</div>

css:

.btn-home {
    background-color: #9b59b6;
    border-color: #333;
    color: #fff;
}

/* Change how it looks when hovered or clicked */

.btn-home:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

.btn-home:active {
    background-color: red;
    border-color: #333;
    color: #fff;
}

Example

【讨论】：