设置twitter自举按钮

Question

Twitter-Bootstrap按钮非常漂亮。 Try them out by scrolling over them

但它们的颜色有限。

有没有什么方法可以改变按钮的基色，同时保持引导使美丽和轻松的美丽悬停效果？

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

Answer 1

我发现最简单的方法是将它放在你的覆盖中。对不起我的缺乏想象力的颜色选择

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 Example

Bootstrap 3 LESS

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

Bootstrap 3 LESS Example

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 Example

Bootstrap 2.3 LESS

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

Bootstrap 2.3 LESS Example

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 Lighten Example

Answer 2

您可以覆盖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]; }

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

我不建议逐个更改CSS值，而是建议使用LESS. Bootstrap在Github上有LESS版本：https://github.com/twbs/bootstrap

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

Answer 7

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

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

如果您不使用所有列出的样式，那么您将在按钮上执行操作时看到默认样式。例如，单击按钮并从按钮中删除鼠标指针后，您将看到默认颜色可见。或者按住按钮，您将看到默认颜色。所以，我列出了所有要覆盖的伪样式。

Answer 8

对于Sass的Bootstrap覆盖它的

.btn-default {

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

}

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

Answer 9

或尝试http://twitterbootstrapbuttons.w3masters.nl/。它根据html颜色输入创建按钮的CSS。在bootstrap css之后添加css。它提供三种类型的按钮（浅色，深色和旋转）。

Answer 10

这是一种非常简单有效的方法： 在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>

Answer 11

在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/

Answer 12

我知道这是一个较老的线程，但只是添加另一个视角。我断言使用覆盖实际上是一种代码味道，并且很快就会在较大的项目上失控。今天你要重写Buttons，明天Modals，第二天下载等等。

我建议尝试注释buttons.less的include，并定义我自己的，或者找到更适合我项目的另一个Buttons库。无耻的插件：这里有一个例子，说明将我们的按钮库与TB混合是多么容易：Using Buttons with Twitter Bootstrap。实际上，您可能仍然希望完全删除buttons.less包含以提高性能，但这显示了如何使事情看起来更少＆＃34;泛型＆＃34;。我自己还没有完成这项练习，但我想你可以先简单地评论一下这样的行：

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

然后使用你自己的按钮模块使用`lessc重新编译。通过这种方式，您可以获得经过测试的核心TB，但仍可以自定义内容，而无需采用重大覆盖。绝对没有理由不使用像Bootstrap这样的库的部分内容。当然，这同样适用于Sass版本的TB

Answer 13

对于Bootstrap（至少对于版本3.1.1）和LESS，您可以使用：

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

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

Answer 14

您可以更改背景颜色并使用！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;
}