设计Twitter的Bootstrap 3.x按钮

Question

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

每个按钮都有3个状态(默认,活动和禁用)

如何添加更多颜色或创建自定义按钮？Twitter的Bootstrap 2.x:Styling twitter bootstrap按钮已经回答了这个问题.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的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/