css - 添加基于 Bootstrap CSS 2.3.2 的自定义类

Question

我已经包含了 Bootstrap CSS，现在想在我自己的 CSS 文件中添加自定义 class。

它只是 .btn-success 的精确副本，仅修改了颜色和 class 名称:

.btn-mine {
    color: #ffffff;
    background-color: #ff8d53;
    border-color: #ef8343;
}
.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
    color: #ffffff;
    background-color: #ea793e;
    border-color: #dc5930;
}
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
    background-image: none;
}
.btn-mine.disabled,
.btn-mine[disabled],
fieldset[disabled] .btn-mine,
.btn-mine.disabled:hover,
.btn-mine[disabled]:hover,
fieldset[disabled] .btn-mine:hover,
.btn-mine.disabled:focus,
.btn-mine[disabled]:focus,
fieldset[disabled] .btn-mine:focus,
.btn-mine.disabled:active,
.btn-mine[disabled]:active,
fieldset[disabled] .btn-mine:active,
.btn-mine.disabled.active,
.btn-mine[disabled].active,
fieldset[disabled] .btn-mine.active {
    background-color: #ff8d53;
    border-color: #ff6314;
}
.btn-mine .caret {
    border-top-color: #fff;
}
.dropup .btn-mine .caret {
    border-bottom-color: #fff;
}

不幸的是，这不起作用，如下所示:http://jsfiddle.net/qG2n6/ .

我知道有很多第 3 方 Bootstrap 按钮制作器可以制作任何颜色的按钮。

但我更想知道为什么我的上述方法不起作用。

我复制了原始 Bootstrap CSS 中所有包含 .btn-success 的样式，只修改了颜色和 class 名称，我希望它能工作.

我在这里错过了什么？

Answer 1

.btn-success 包含

.btn-success {
background-color: #5BB75B;
background-image: linear-gradient(to bottom, #62C462, #51A351);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

虽然你的类只包含一些边框和背景色