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

Posted 2023-02-21

【中文标题】为 Twitter 的 Bootstrap 3.x 按钮设计样式

【英文标题】：Styling Twitter's Bootstrap 3.x Buttons

【发布时间】：2013-06-12 07:23:38

【问题描述】：

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

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

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

【参考方案1】：

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

【参考方案2】：

这是另一种选择，其优点是您可以根据需要添加任意数量的“按钮操作”（颜色）。这是简短的演示视频：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;

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

【参考方案3】：

这是一种设置其他 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; 

【参考方案4】：

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

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

http://twitterbootstrap3buttons.w3masters.nl/

【参考方案5】：

为您的 less 文件添加额外的颜色并重新编译。另见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,
.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代码

【讨论】：

Bootcamp 3 中有 .btn 伪状态吗？我在尝试编译上述代码时遇到“未定义”错误。

你说得对，已经改了。在最新版本 (3.0.3) 中，您应该使用 .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);。我也会更新我的回答。

对于 bootstrap 4.0-alpha，按钮变体 mixin 函数的 API 已更改为 @mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%))。请检查scss/mixins/_buttons.scss 的文件以获取您自己的引导程序版本，看看是否有任何未来更新。

【参考方案6】：

我一直在寻找一种可能的解决方案来设计引导按钮的样式。我遵循了最新的 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; 

【讨论】：

您的解决方案将为按钮提供背景颜色#colorname;，但不处理默认、活动（悬停）和禁用的不同状态。使用 background 代替 background-image 没有任何区别，请参阅：***.com/questions/10205464/…