Css 设置Twitter的样式'；s引导3.x按钮

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

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

---

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

为较少的文件添加额外的颜色并重新编译。另见。 更新

<a href="#" target="_blank" class="btn btn-custom pull-right"> 
<i class="fa fa-edit fa-lg"></i>
Create an Event
</a>

.btn-custom {
    background: #colorname; 
}

正如@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;
}

结束更新

<a href="#" target="_blank" class="btn btn-custom pull-right"> 
<i class="fa fa-edit fa-lg"></i>
Create an Event
</a>

.btn-custom {
    background: #colorname; 
}

要生成自定义按钮，请执行以下操作：

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

在上面，1DC00将是您的自定义颜色，19b300将是您的深色。代替less解决方案，您还可以将此css直接添加到html文件中（在引导css之后）

---

或者直接从

获取css代码。我一直在寻找一种可能的解决方案，来设计引导按钮的样式。我采用了最新的css风格语言（less），并采用了很多变通方法来定制按钮，但没有一个是有用的。有相当惊人的引导按钮生成器在线提供，如和更多。但令我惊讶的是，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>

.btn-custom {
    background: #colorname; 
}

---

使用未经处理的css也很容易做到这一点

CSS

HTML

紫色
水鸭

---

拨弄：

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

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

---

这里有一个简单的方法，可以为额外的引导按钮颜色设计样式

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

---

这里有另一个选择，它的优点是您可以添加任意数量的“按钮操作”（颜色）。以下是简短的演示视频：

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

---

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

您的解决方案将为按钮提供背景色

#colorname但不处理默认、活动（悬停）和禁用的不同状态。使用
background
代替
background image
没有任何区别，请参见：Bootcamp 3中的Is.btn伪状态？我在编译上面的代码时遇到了一个“未定义”错误。你说得对，它已被更改。在最新版本（3.0.3）中，应使用
。按钮变量（@btn default color；@btn default bg；@btn default border）。我也将更新我的aswer。至于bootstrap 4.0-alpha，按钮变量mixin函数的API已更改为
@mixin按钮变量（$background，$border，$active background:darken（$background，7.5%），$active border:darken（$border，10%）
。请检查
scss/mixins/\u buttons.scss
上的文件，以了解您自己的引导版本，查看是否有任何未来的更新。