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

Question

有没有一款现成的Bootstrap包，可以添加除默认颜色以外的其他颜色？

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

<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>

- 4m1nh4j1

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;
}

这里有两组颜色：

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

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

Bootply 例子

- zessx

---

你刚刚完成了现有类的主题，我们需要另一个类来支持更多颜色。 - Vasil Valchev

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通配符选择器来创建这样的样式...

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

- Zim

Answer 3

尽管OP正在寻找“即用包”，但我在自己寻找东西时偶然发现了这个。Bootstrap按钮生成器 提供了一个非常简单的在线工具，可以快速创建其他按钮颜色。

此外，还有一个工具可以为自定义按钮构建HTML和CSS：http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php

- Homer

---

谢谢你分享这个。 - 4m1nh4j1

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”的新标签类。

- Bizarro

Answer 5

AngularJS文档还定义了一些自定义颜色样式，如果您很懒，可能想要“窃取”。至少它可以给你一个想法，如何创建自己的颜色方案。

CSS

.type-hint-expression {
  background: purple;
}

.type-hint-date {
  background: pink;
}

.type-hint-string {
  background: #3a87ad;
}

.type-hint-function {
  background: green;
}

.type-hint-object {
  background: #999;
}

.type-hint-array {
  background: #F90;
}

.type-hint-boolean {
  background: rgb(18, 131, 39);
}

.type-hint-number {
  background: rgb(189, 63, 66);
}

.type-hint-regexp {
  background: rgb(90, 84, 189);
}

.type-hint-domelement {
  background: rgb(95, 158, 160);
}

使用方法

<span class="label type-hint-number">number</span>

例子

https://docs.angularjs.org/api/ng/filter/limitTo#limitTo-arguments

源代码

https://docs.angularjs.org/css/docs.css

PS：我不支持抄袭代码。请创造你自己的独特风格，或者至少在使用别人的代码时注明出处。

- user1438038

Answer 6

我正在使用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/

- Martin Randall