Question

所以我一直在尝试一大堆改变引导网站中按钮颜色的东西。我已尝试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之前检查代码是否存在其他错误。

Answer 1

您可以为自定义按钮创建新类，如下所示：

<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

Answer 2

只需将自己的按钮设为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;
}

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

Bootstrap颜色个别按钮

2 个答案:

Example