css - 样式化 twitter 引导按钮

Question

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

引导按钮屏幕截图

但它们的颜色有限。

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

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

score 178 · Accepted Answer

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

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 示例

引导程序 3 LESS

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

Bootstrap 3 LESS 示例

引导程序 3 SASS

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

引导 3 SASS 示例

引导程序 2.3 LESS

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

Bootstrap 2.3 LESS 示例

引导程序 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 减轻示例

score 33 · Accepted Answer

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

score 27 · Accepted Answer

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

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

score 24 · Accepted Answer

基本上，Twitter Bootstrap 中的按钮在 CSS 中由“.btn{}”控制。您需要做的是转到 CSS 文件并找到其中显示“btn”的位置并更改颜色设置。但是，这并不像这样做那么简单，因为您还必须更改按钮在突出显示时变为什么颜色等。为此，您必须在 CSS 中查找其他标签，例如“.btn:hover{} “， ETC。

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

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

score 21 · Accepted Answer

如果您在加载 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;
}

score 12 · Accepted Answer

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

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

score 11 · Accepted Answer

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

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

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

score 9 · Accepted Answer

对于 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

score 5 · Accepted Answer

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

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

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

Bootstrap 2.3.2 按钮是渐变的，但 3.0.0（新版本）是扁平的，看起来更酷。

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

score 1 · Accepted Answer

我知道这是一个较旧的线程，但只是为了添加另一个视角。我断言使用覆盖确实有点代码味道，并且在大型项目中很快就会失控。今天你要覆盖按钮，明天要覆盖 Modals，第二天要覆盖 Dropdowns，等等，等等。

我建议尝试可能注释掉包含的buttons.less内容并定义我自己的，或者找到另一个更适合我的项目的 Buttons 库。无耻的插件：这是一个将我们的 Buttons 库与 TB 混合是多么容易的示例：Using Buttons with Twitter Bootstrap。同样，在实践中，您可能希望buttons.less完全删除包含以提高性能，但这表明您可以如何使事情看起来不那么“通用”。我自己还没有完成这个练习，但我想你可以从简单地注释掉以下行开始：

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

然后使用您自己的按钮模块之一使用 `lessc 重新编译。这样，您就可以获得经过实战考验的 TB 核心，但仍可以自定义事物而无需诉诸重大覆盖。绝对没有理由不只使用像 Bootstrap 这样的库的一部分。当然这同样适用于 Sass 版本的 TB

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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