Twitter’s Bootstrap 3按钮的颜色有限。默认情况下会有5 7种颜色(默认主要，错误，警告，信息，成功和链接)
每个按钮获得3状态(默认，活动和禁用)
如何添加更多的颜色或创建自定义按钮？这个问题已经回答了Twitter的Bootstrap 2.x：Styling twitter bootstrap buttons. Bootstrap 3不能向后兼容。在less和css文件中将有很多更改。支持IE7将被丢弃。 TB3是移动优先。标记代码也将更改。
解决方法
为您的少量文件添加额外的颜色并重新编译。另见
Twitter Bootstrap Customization Best Practices。
更新
更新
正如@ ow3n提到自v3.0.3以来使用：
.btn-custom {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
注意在上面的@ btn-default-color设置字体颜色，@ btn-default-bg是背景颜色，@ btn-default-border是边框的颜色。基于这些参数计算诸如活动，悬停和禁用的状态的颜色。
例如：
.btn-custom {
.button-variant(blue; red; green);
}
将导致：
对于想要直接使用CSS的人，请替换此代码中的颜色：
.btn-custom {
color: #0000ff;
background-color: #ff0000;
border-color: #008000;
}
.btn-custom:hover,.btn-custom:focus,.btn-custom:active,.btn-custom.active,.open .dropdown-toggle.btn-custom {
color: #0000ff;
background-color: #d60000;
border-color: #004300;
}
.btn-custom:active,.open .dropdown-toggle.btn-custom {
background-image: none;
}
.btn-custom.disabled,.btn-custom[disabled],fieldset[disabled] .btn-custom,.btn-custom.disabled:hover,.btn-custom[disabled]:hover,fieldset[disabled] .btn-custom:hover,.btn-custom.disabled:focus,.btn-custom[disabled]:focus,fieldset[disabled] .btn-custom:focus,.btn-custom.disabled:active,.btn-custom[disabled]:active,fieldset[disabled] .btn-custom:active,.btn-custom.disabled.active,.btn-custom[disabled].active,fieldset[disabled] .btn-custom.active {
background-color: #ff0000;
border-color: #008000;
}
.btn-custom .badge {
color: #ff0000;
background-color: #0000ff;
}
结束更新
.btn-custom {
.btn-pseudo-states(@yourColor,@yourColorDarker);
}
上面将生成以下css：
.btn-custom {
background-color: #1dcc00;
border-color: #1dcc00;
}
.btn-custom:hover,.btn-custom.active {
background-color: #19b300;
border-color: #169900;
}
.btn-custom.disabled:hover,fieldset[disabled] .btn-custom.active {
background-color: #1dcc00;
border-color: #1dcc00;
}
在上面#1dcc00将是你的自定义颜色和#19b300你更深的颜色。代替较少的解决方案，你也可以将这个css直接添加到你的html文件(在引导css之后)。
