造型Twitter的Bootstrap 3.xbutton
Twitter的Bootstrap 3button的颜色有限。 默认情况下会有5 7种颜色（默认主要，错误，警告，信息，成功和链接）请参阅：
每个button都有3个状态（默认，活动和禁用）
如何添加更多颜色或创build自定义button？ 这个问题已经为Twitter的Bootstrap 2.x： 造型twitter引导button回答了。 引导程序3不向后兼容。 在less和css文件中会有很多变化。 IE7的支持将被丢弃。 TB3首先是移动的。 标记码也将被改变。
为更less的文件添加额外的颜色并重新编译。 另请参阅Twitter Bootstrap自定义最佳实践 。 更新
正如从@ 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设置边框的颜色。 活动，hover和禁用状态的颜色根据这些参数进行计算。
例如：
.btn-custom { .button-variant(blue; red; green); }
将导致：
谁想要使用CSS直接，请replace此代码中的颜色：
.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, .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; }
结束更新
要生成一个自定义button：
.btn-custom { .btn-pseudo-states(@yourColor, @yourColorDarker); }
以上将生成以下CSS：
.btn-custom { background-color: #1dcc00; border-color: #1dcc00; } .btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active { background-color: #19b300; border-color: #169900; } .btn-custom.disabled:hover, .btn-custom.disabled:focus, .btn-custom.disabled:active, .btn-custom.disabled.active, .btn-custom[disabled]:hover, .btn-custom[disabled]:focus, .btn-custom[disabled]:active, .btn-custom[disabled].active, fieldset[disabled] .btn-custom:hover, fieldset[disabled] .btn-custom:focus, fieldset[disabled] .btn-custom:active, fieldset[disabled] .btn-custom.active { background-color: #1dcc00; border-color: #1dcc00; }
在上面＃1dcc00将是你的自定义颜色和＃19b300你的颜色较深。 而不是较less的解决scheme，你也可以直接添加这个CSS到你的HTML文件（在引导CSS后）。
或者直接从Twitter的Bootstrap 3 Button Generator获取你的css代码
使用未处理的css也很容易
CSS
.btn-purple { background: #9b59b6; border-color: #9b59b6; } .btn-purple:hover { background: #8e44ad; border-color: #8e44ad; } .btn-teal { background: #1abc9c; border-color: #1abc9c; } .btn-teal:hover { background: #16a085; border-color: #16a085; }
HTML
<button class="btn btn-purple">purple</button> <button class="btn btn-teal">teal</button>
小提琴： http : //jsfiddle.net/z7hV6/
通过谷歌find这个解决scheme，并更好地了解引导button后，我发现以下工具来生成引导button不同的颜色。
这意味着你将不得不将这个添加到一个单独的CSS，但它是我所需要的完美。 希望对其他人有用：
这是一个很好又简单的方法来devise更多的Bootstrapbutton颜色
Bootstrapbutton生成器
以下是它将生成的CSS的示例：
.btn-sample { color: #ffffff; background-color: #611BBD; border-color: #130269; } .btn-sample:hover, .btn-sample:focus, .btn-sample:active, .btn-sample.active, .open .dropdown-toggle.btn-sample { color: #ffffff; background-color: #49247A; border-color: #130269; } .btn-sample:active, .btn-sample.active, .open .dropdown-toggle.btn-sample { background-image: none; } .btn-sample.disabled, .btn-sample[disabled], fieldset[disabled] .btn-sample, .btn-sample.disabled:hover, .btn-sample[disabled]:hover, fieldset[disabled] .btn-sample:hover, .btn-sample.disabled:focus, .btn-sample[disabled]:focus, fieldset[disabled] .btn-sample:focus, .btn-sample.disabled:active, .btn-sample[disabled]:active, fieldset[disabled] .btn-sample:active, .btn-sample.disabled.active, .btn-sample[disabled].active, fieldset[disabled] .btn-sample.active { background-color: #611BBD; border-color: #130269; } .btn-sample .badge { color: #611BBD; background-color: #ffffff; }
我一直在寻找一个可能的解决scheme一段时间来引导引导button。 我遵循最新的CSS风格的语言（lesshttp://lesscss.org/ ），以及相当多的解决方法来定制button，但没有一个是有用的。 有很多令人惊讶的引导button生成器在线可用，如http://www.plugolabs.com/twitter-bootstrap-button-generator/等等。; 但令我惊讶的是，css文件中的一行代码对我来说工作得很好。 （注意：我已经使用“background”作为参数来指定button颜色的名称，而不是“background-color”。在html代码中，我使用了btn-custom作为我在css中重新定义的类名文件。）
HTML代码
<a href="#" target="_blank" class="btn btn-custom pull-right"> <i class="fa fa-edit fa-lg"></i> Create an Event </a>
CSS代码
.btn-custom { background: #colorname; }
这是另一个select，你可以添加尽可能多的“button操作”（颜色），只要你想。 下面是简短的演示video： 使用Unicorn-UIbutton和Twitter Bootstrap
如果你抓取库并编译自己，你可以通过编辑一个如下的Sass列表来定义许多“button操作”：
$ubtn-colors: ('primary' #1B9AF7 #FFF) ('plain' #FFF #1B9AF7) ('inverse' #222 #EEE) ('action' #A5DE37 #FFF) ('highlight' #FEAE1B #FFF)('caution' #FF4351 #FFF) ('royal' #7B72E9 #FFF) !default;
添加尽可能多的自定义types（当然也可以删除那些你不需要的）。
