CSS 其他 Twitter Bootstrap 标签/按钮/警报/徽章颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21725557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Additional Twitter Bootstrap label/button/alert/badge colors
提问by 4m1nh4j1
Is there a ready-to-use pack for bootstrap to add additional colors, others than the default ones ?
是否有现成的 bootstrap 包来添加其他颜色，而不是默认颜色？
Default colors are (label example) :
默认颜色为（标签示例）：
<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>
回答by zessx
you can quickly and easily set your own color set for labels, using this kind of CSS :
您可以使用这种 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;
}
Here are 2 sets :
这里有2套：
- default:
#95a5a6/#7f8c8d - primary:
#3498db/#2980b9 - success:
#2ecc71/#27ae60 - info:
#9b59b6/#8e44ad - warning:
#e67e22/#d35400 - danger:
#e74c3c/#c0392b
- 默认：
#95a5a6/#7f8c8d - 主要的：
#3498db/#2980b9 - 成功：
#2ecc71/#27ae60 - 信息：
#9b59b6/#8e44ad - 警告：
#e67e22/#d35400 - 危险：
#e74c3c/#c0392b
- default:
#95a5a6/#7f8c8d - primary:
#00A388/#007D68 - success:
#79BD8F/#659E78 - info:
#BEEB9F/#A5CC8A - warning:
#FFFF9D/#D1D181 - danger:
#FF6138/#D6512F
- 默认：
#95a5a6/#7f8c8d - 主要的：
#00A388/#007D68 - 成功：
#79BD8F/#659E78 - 信息：
#BEEB9F/#A5CC8A - 警告：
#FFFF9D/#D1D181 - 危险：
#FF6138/#D6512F
回答by Zim
Some 3rd party custom themes have added colors, but I'm not aware of a "ready to use pack". It's easy to add your own by just extending the CSS. For example here are "social" buttons..
一些 3rd 方自定义主题添加了颜色，但我不知道“准备使用包”。只需扩展 CSS 即可轻松添加您自己的 CSS。例如这里是“社交”按钮..
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;
}
Usage
用法
<button class="btn btn-facebook btn-lg">Facebook</button>
EDIT
编辑
You could also use CSS wildcard selectors to create styles like this..
您还可以使用 CSS 通配符选择器来创建这样的样式。
Apple colors demo: http://bootply.com/112999
苹果颜色演示：http: //bootply.com/112999
回答by Homer
Although the OP is asking for a "ready-to-use pack", I stumbled across this while looking for something myself. Bootstrap Button Generatoroffers a dead simple online tool for quickly creating additional button colors.
尽管 OP 要求提供“即用型包装”，但我在自己寻找某些东西时偶然发现了这一点。Bootstrap Button Generator提供了一个非常简单的在线工具，用于快速创建其他按钮颜色。
Also this one, it will build out the HTML and CSS for a custom button: http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php
还有这个，它将为自定义按钮构建 HTML 和 CSS：http: //www.tutorialrepublic.com/twitter-bootstrap-button-generator.php
回答by Bizarro
Even though zessx's answer is correct, maybe some users won't understand that the solution is valid for the creation of brand new classes, as my example below:
即使 zessx 的答案是正确的，也许有些用户不会理解该解决方案对于创建全新的类是有效的，如下例所示：
.label-alarm {
background-color: #e0e000;
}
.label-alarm[href]:hover,
.label-alarm[href]:focus {
background-color: #e0e12;
}
By adding this code, we will have a new label class called "label-alarm" besides all the standard Bootstrap classes (label-default, label-primary, etc.)
通过添加此代码，除了所有标准 Bootstrap 类（label-default、label-primary 等）之外，我们还将拥有一个名为“label-alarm”的新标签类。
回答by Martin Randall
I am doing this with the bootstrap less mixins for buttons, and something like the following:
我正在使用用于按钮的 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);
}
This will save you a lot of time and potential errors over writing custom css, particularly if you want labels, buttons, panels, etc, all in your new color.
这将节省您编写自定义 css 的大量时间和潜在错误，特别是如果您希望标签、按钮、面板等全部采用新颜色。
For whatever reason, I can't find information about this option on the Bootstrap website, but here is a third party guide to some of these options: https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/
无论出于何种原因，我都无法在 Bootstrap 网站上找到有关此选项的信息，但这里是其中一些选项的第三方指南：https: //www.sitepoint.com/less-beyond-basics-bootstrap-mixins -图书馆/
