造型Twitter的Bootstrap 3.xbutton

Twitter的Bootstrap 3button的颜色有限。 默认情况下会有5 7种颜色(默认主要,错误,警告,信息,成功和链接)请参阅:

在这里输入图像说明

Twitter的引导按钮

每个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,但它是我所需要的完美。 希望对其他人有用:

http://twitterbootstrap3buttons.w3masters.nl/

这是一个很好又简单的方法来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(当然也可以删除那些你不需要的)。