css - 为 Twitter 的 Bootstrap 3.x 按钮设计样式

Question

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

每个按钮都有 3 种状态（默认、激活和禁用）

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

Answer 1

为您的 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 边框的颜色。根据这些参数计算活动、悬停和禁用等状态的颜色。

例如：

.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 的 Bootstrap 3 按钮生成器获取你的 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 按钮颜色的简单方法

引导按钮生成器

下面是它将生成的 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-color”，而是使用“background”作为参数来指定按钮颜色的名称。在 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

这是另一种选择，其优点是您可以根据需要添加任意数量的“按钮操作”（颜色）。这是简短的演示视频：Using Unicorn-UI Buttons with Twitter Bootstrap

如果您获取库并自己编译，您可以通过编辑如下所示的 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;

添加任意数量的自定义类型（当然也删除那些你不需要的）。