Question

Twitter's Bootstrap 3按钮的颜色有限。默认情况下会有 5 7种颜色（默认主要，错误，警告，信息，成功和链接）请参阅：

enter image description here

Twitter's Bootstrap Buttons

每个按钮都有3个状态（默认，活动和禁用）

如何添加更多颜色或创建自定义按钮？ Twitter的Bootstrap 2.x已经回答了这个问题：Styling twitter bootstrap buttons。 Bootstrap 3不向后兼容。 less和css文件中会有很多变化。对IE7的支持将被取消。 TB3首先是移动设备。标记代码也将被更改。

Answer 1

为较少的文件添加额外的颜色并重新编译。另请参阅Twitter Bootstrap Customization Best Practices。的更新

正如v3.0.3中@ ow3n所提到的那样：

.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, .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: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你的颜色较深。除了更少的解决方案，您还可以将此css直接添加到您的html文件（在引导程序CSS之后）。

或者直接从Twitter's Bootstrap 3 Button Generator
获取您的css代码

Answer 2

使用未经处理的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/

Answer 3

通过谷歌找到这个解决方案并更好地理解引导按钮后，我发现以下工具为引导按钮生成不同的颜色。

这确实意味着你必须将它添加到一个单独的CSS中，但它非常适合我需要的东西。这里希望它对其他人有用：

http://twitterbootstrap3buttons.w3masters.nl/

Answer 4

这是设置其他Bootstrap按钮颜色

的简便方法

Bootstrap Button Generator

以下是它将生成的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; 
}

Answer 5

我一直在寻找可能的解决方案很长一段时间来设计引导按钮。我遵循了最新的css样式语言（少http://lesscss.org/），并且有很多变通方法可以自定义按钮，但没有一个是有用的。在线提供了非常棒的引导按钮生成器，例如http://www.plugolabs.com/twitter-bootstrap-button-generator/等等。但令我惊讶的是，css文件中的一行代码对我来说效果不错。（注意：我使用“background”作为参数来指定按钮颜色的名称而不是“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; 
}

Answer 6

这是另一种选择，其优势在于您可以添加尽可能多的＆＃34;按钮操作＆＃34; （颜色）你想要的。这是简短的演示视频：Using Unicorn-UI Buttons with Twitter Bootstrap

如果您抓住图书馆并自行编译，您可以定义多个＆＃34;按钮操作＆＃34;通过编辑一个类似于：

的Sass列表

$ubtn-colors: ('primary' #1B9AF7  #FFF) ('plain' #FFF #1B9AF7) ('inverse' #222 #EEE) ('action' #A5DE37  #FFF) ('highlight' #FEAE1B #FFF)('caution' #FF4351 #FFF) ('royal' #7B72E9 #FFF) !default;

添加您喜欢的自定义类型（当然也可以删除您不需要的那些）。

设计Twitter的Bootstrap 3.x按钮

6 个答案: