设计Twitter的引导3。x按钮

Question

Twitter的Bootstrap 3按钮颜色有限。默认情况下会有

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

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

Answer 1

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

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

http://twitterbootstrap3buttons.w3masters.nl/

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;
 }

超文本标记语言

<button class="btn btn-purple">purple</button>

<button class="btn btn-teal">teal</button>

摆弄：http://jsfiddle.net/z7hV6/

Answer 3

为较少的文件添加额外的颜色并重新编译。另请参阅推特引导自定义最佳实践。更新

正如@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-边框设置边框颜色。活动状态、悬停状态和禁用状态的颜色是根据这些参数计算的。

例如：

.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代码