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

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

• 默认:#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示例

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要求提供"即用型包装",但我偶然发现了这个问题.Bootstrap Button Generator提供了一个简单的在线工具,可以快速创建其他按钮颜色.

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