设置Twitter Bootstrap按钮的样式

Twitter-Bootstrap按钮非常漂亮。通过滚动它们来尝试一下

但是它们的颜色有限。

有什么办法可以改变按钮的基本颜色，同时又保持引导程序使它变得如此漂亮和轻松的漂亮的悬停效果？

我完全不知道twitter用于维持这些效果的css / javascript是什么样子。

基本上，Twitter Bootstrap中的按钮在CSS中由“ .btn {}”控制。您要做的是转到CSS文件，找到它说“ btn”的位置并更改颜色设置。但是，这并不只是简单，因为突出显示按钮时还必须更改按钮的颜色，等等。要做到这一点，您必须在CSS中寻找其他标签，例如“ .btn：hover {} ”等

更改它需要更改CSS。这是该文件的快速链接：

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

我发现最简单的方法是将其放在您的替代中。对不起，我无法想象的色彩选择

Bootstrap 4-Alpha SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Bootstrap 4 Alpha SASS示例

Bootstrap 3 LESS

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Bootstrap 3 LESS示例

Bootstrap 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Bootstrap 3 SASS示例

Bootstrap 2.3更少

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Bootstrap 2.3 LESS示例

Bootstrap 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

它将为您照顾悬停/活动

从注释中，如果您想在使用黑色时使按钮变亮而不是变暗（或者只是想反转），则需要进一步扩展类，如下所示：

Bootstrap 3 SASS Ligthen

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

Bootstrap 3 SASS减轻示例

您可以覆盖CSS中的颜色，例如“危险”按钮：

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

这是一个很好的资源：http : //charliepark.org/bootstrap_buttons/

您可以更改颜色并查看效果。

如果在加载bootstrap.css（版本3）之后已经在加载自己的自定义CSS文件，则可以将这2种CSS样式添加到custom.css中，它们将覆盖默认按钮样式的bootstrap默认值。

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

.btn
{
  background-color: #9F418F;
  border-color: #9F418F;
}

我建议不要使用CSS来一一更改CSS值。Bootstrap在Github上具有LESS版本：https : //github.com/twbs/bootstrap

LESS允许您定义变量以更改颜色，从而更加方便。定义颜色一次，LESS编译CSS文件，该文件会全局更改值。节省时间和精力。

为了完全覆盖引导按钮样式，您需要覆盖属性列表。请参见以下示例。

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

如果您未使用所有列出的样式，则在执行按钮操作时将看到默认样式。例如，一旦单击按钮并从按钮上移开鼠标指针，您将看到默认的颜色。或者按住按钮，您将看到默认颜色。因此，我列出了所有将要覆盖的伪样式。

对于Bootstrap for Sass覆盖它是

.btn-default {

    @include button-variant($color, $background, $border);

}

您可以在此处查看其来源：https : //github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

或尝试http://twitterbootstrapbuttons.w3masters.nl/。它基于html颜色输入为按钮创建css。在引导CSS之后添加CSS。它提供了三种样式的按钮（亮，暗和旋转）。

这是一种非常简单有效的方法：在CSS中添加您要应用于按钮的颜色的类：

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

并将样式添加到您的引导按钮或链接：

<a href="xxx" class="btn btn-info my-btn">aaa</a>

在Twitter Bootstrap bootstrap 3.0.0中，Twitter按钮是扁平的。您可以从http://getbootstrap.com/customize对其进行自定义。按钮颜色，边框半径等

您还可以找到HTML代码和其他功能 http://twitterbootstrap.org/bootstrap-css-buttons。

Bootstrap 2.3.2按钮是渐变的，但3.0.0（新发行版）是扁平的，看上去更酷。

并且您还可以通过以下资源找到自定义整个引导程序外观和样式的方法：http : //twitterbootstrap.org/top-5-customizing-bootstrap-resources/

我知道这是一个较旧的线程，但这只是为了增加另一个角度。我断言使用覆盖确实有点代码味道，并且在大型项目中会很快失控。今天，您将覆盖按钮，明天将覆盖模式，第二天将覆盖下拉列表等，等等。

我建议尝试注释掉include buttons.less并定义自己的，或者找到另一个更适合我的项目的Buttons库。无耻的插件：这是将Buttons库与TB混合在一起的简单示例：在Twitter Bootstrap中使用Buttons。在实践中，再次，您可能希望buttons.less完全删除包含以提高性能，但这表明如何使外观看起来不那么“泛型”。我本人还没有做过此练习，但我想您可以先注释掉以下行开始：

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

然后使用您自己的按钮模块之一使用`lessc重新编译。这样，您就可以在TB上经过战斗测试的核心，但仍然可以自定义内容，而无需诉诸重大替代。绝对没有理由不只使用Bootstrap之类的库的一部分。当然，同样适用于Sass版本的TB

对于Bootstrap（至少对于3.1.1版）和LESS，可以使用以下命令：

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

在中定义bootstrap/less/buttons.less。

您可以更改背景颜色并使用！important;

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}