Question

是否有一个随时可用的引导程序包来添加其他颜色，而不是默认颜色？

默认颜色是（标签示例）：

<span class="label">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-important">Important</span>
<span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>

Answer 1

您可以使用这种CSS快速轻松地为标签设置自己的颜色集：

.label-default {
  background-color: #999;
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #808080;
}
.label-primary {
  background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #3071a9;
}
.label-success {
  background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}
.label-info {
  background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}
.label-warning {
  background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}
.label-danger {
  background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}

以下是2套：

enter image description here

默认：#95a5a6 / #7f8c8d
主要：#3498db / #2980b9
成功：#2ecc71 / #27ae60
info：#9b59b6 / #8e44ad
警告：#e67e22 / #d35400
危险：#e74c3c / #c0392b

enter image description here

默认：#95a5a6 / #7f8c8d
主要：#00A388 / #007D68
成功：#79BD8F / #659E78
info：#BEEB9F / #A5CC8A
警告：#FFFF9D / #D1D181
危险：#FF6138 / #D6512F

Bootply example

Answer 2

某些第三方自定义主题添加了颜色，但我不知道“准备使用包”。只需扩展CSS就可以轻松添加自己的内容。例如，这里是“社交”按钮..

<强> CSS

.btn-facebook {
    background-color:#3b5998;
    color:#fff;
}
.btn-google {
    background-color:#dd4b39;
    color:#fff;
}
.btn-twitter {
    background-color:#2ba9e1;
    color:#fff;
}
.btn-pinterest {
    background-color:#cb2027;
    color:#fff;
}
.btn-tumblr {
    background-color:#2c4762;
    color:#fff;
}

<强>用法

<button class="btn btn-facebook btn-lg">Facebook</button>

<强> 修改

你也可以使用CSS通配符选择器来创建这样的样式..

Apple颜色演示：http://bootply.com/112999

Answer 3

虽然OP正在要求一个即时使用的包＃34;但我偶然发现了这个问题。 Bootstrap Button Generator提供了一个简单的在线工具，可以快速创建其他按钮颜色。

此外，它还将为自定义按钮构建HTML和CSS：http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php

Answer 4

即使zessx的答案是正确的，也许有些用户不会理解该解决方案对于创建全新类有效，如下例所示：

.label-alarm {
  background-color: #e0e000;
}
.label-alarm[href]:hover,
.label-alarm[href]:focus {
  background-color: #e0e12;
}

通过添加此代码，除了所有标准Bootstrap类（label-default，label-primary等）之外，我们还将有一个名为“label-alarm”的新标签类。

Answer 5

我正在使用bootstrap less mixins进行按钮，如下所示：

@import "path/to/bootstrap/mixins/buttons.less";
// Danger and error appear as red
.btn-sample {
  .button-variant(@btn-sample-color; @btn-sample-bg; @btn-sample-border);
}

这将为您节省大量时间和潜在的错误，而不是编写自定义CSS，特别是如果您想要新的颜色的标签，按钮，面板等。

无论出于何种原因，我都无法在Bootstrap网站上找到有关此选项的信息，但以下是其中一些选项的第三方指南： https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/

额外的Twitter Bootstrap标签/按钮/警报/徽章颜色

5 个答案: