0

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

它只是.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/。

我知道有许多 3rd-party Bootstrap 按钮制造商可以创建任何颜色的按钮。

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

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

我在这里想念什么？

4

2 回答 2

1

您还需要覆盖背景图像。这就是 Bootstrap 2.3.2 中按钮的轻微渐变的来源。看这里：

.btn-mine {
    color: #ffffff;
    background-image: none;
    background-color: #ff8d53;
    border-color: #ef8343;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

http://jsfiddle.net/qG2n6/1/

如果添加 background-image: none;，添加 IE 过滤器并更改文本阴影，您将获得按钮。但是，如果您想要一个渐变来匹配您的 Bootstrap 版本的样式，您将需要您自己的 CSS 渐变。您可以使用此工具制作自己的工具：

http://www.colorzilla.com/gradient-editor/

这可能看起来像这样：

.btn-mine {
    color: #ffffff;
    border-color: #dc5930;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background: #ff8d53;
    background: -moz-linear-gradient(top,  #ff8d53 0%, #ff732d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8d53), color-stop(100%,#ff732d));
    background: -webkit-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: -o-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: -ms-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: linear-gradient(to bottom,  #ff8d53 0%,#ff732d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8d53', endColorstr='#ff732d',GradientType=0 );
    background-repeat: repeat-x;
}

http://jsfiddle.net/qG2n6/3/

于 2013-08-29T05:28:37.403 回答
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);

虽然您的课程只包含一些边框和背景颜色

于 2013-08-29T00:40:43.853 回答