Twitter Bootstrap按钮样式化

Question

Twitter-Bootstrap的按钮非常漂亮。 通过滚动鼠标尝试它们

但是按钮颜色有限。

是否有任何方法可以改变按钮的基本颜色，同时保持Bootstrap所实现的美观和无需努力的悬停效果？

我完全不知道Twitter使用的css/javascript代码是什么样子来维护这些效果。

- Elias7

---

找到并编辑按钮的 less 定义，然后使用 lessc 重新编译 CSS。不要直接编辑 CSS 文件！ 这样做是不可维护的。 - nalply

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

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 LESS

.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浅化示例

- chrisan

---

你想将这句话翻译成 SCSS 语言吗？ - Dreyfuzz

然后运行 lessc 将您的更改编译为 CSS。 - nalply

Dreyfuzz，我不使用scss，但看了第三方sass bootstraps后（https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_buttons.scss），似乎你可以这样做：`.btn-primary {@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); }` ，请根据需要更改变量（对于可怕的格式化表示抱歉）。 - chrisan

我在 main.less 中遇到了 .buttonBackground 在此处未定义 的问题，我需要在 less 文件中引入其他内容吗？ - Himalay Majumdar

@hmajumdar 确保您首先导入了Bootstrap Less或Sass框架，然后再添加覆盖。如果您收到“buttonBackground未定义”的消息，则可能没有该框架或正在使用旧版2.3，应切换到v3的“button-variant”。我添加了一些Codepen示例，其中包含最少的文件（尽管您可能希望不仅仅是这些）。 - chrisan

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

- MikeAr

---

我认为你还需要样式化:focus和:active，否则在点击/拖动时有时会出现奇怪的颜色... - Simon East

简单，我喜欢它。 - The Onin

对于那些通过搜索找到这篇文章的人，如果你在点击并拖动按钮时得到了默认颜色，你需要使用.btn-primary:active:focus {来选择和覆盖该情况。 - Shane Reustle

Answer 3

这是一个不错的资源：http://charliepark.org/bootstrap_buttons/

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

- Tran Cuong

---

这是一个配置器。如果您急于为客户创建原型，那么使用它非常容易。然而，从长远来看，它并不可维护。如果配置器消失了怎么办？因此，对于真正的项目，“lessc”是更好的解决方案。 - nalply

喜欢这个解决方案，不过我希望有一种方法可以输入rgb/rgba来获取精确的颜色。 - SedJ601

@nalply less非常棒，如果您已经掌握了这一步骤，但是这个“配置器”可以完成生成CSS所需的所有操作。将其放入并开始使用。之后您将不再需要配置器。 - moodboom

Answer 4

基本上，Twitter Bootstrap中的按钮是通过“.btn{}”在CSS中控制的。您需要打开CSS文件，找到“btn”并更改颜色设置。但是，这并不像简单地做那样容易，因为您还必须更改按钮在高亮时变成的颜色等。要做到这一点，您需要查找CSS中的其他标签，例如“.btn:hover{}”等。

更改需要更改CSS。以下是该文件的快速链接： https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

- Tanvir Ahmed

---

这不是一个特别优美的解决方案。请使用基于LESS的其他解决方案，或通过他们网站上的变量编辑器自定义Bootstrap。 - Jesper

覆盖它...将你的 CSS 文件放在最后加载，这样可以帮助你解决问题...使用 Bootstrap 的相同类。 - Jaimin MosLake

是的，我绝对反对修改bootstrap.css。就像Jaimin所说，只需覆盖它即可。 - Tim Ludwinski

Answer 5

如果您已经在加载bootstrap.css（版本3）之后加载自己的自定义CSS文件，您可以将这两个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;
}

- Lilster

Answer 6

建议使用LESS来代替逐个更改CSS值。Bootstrap在Github上提供了LESS版本：https://github.com/twbs/bootstrap

使用LESS可以定义变量以改变颜色，这使得操作更加方便。只需定义一次颜色，LESS会编译CSS文件并在全局范围内更改值，节省时间和精力。

- Petri Tuononen

Answer 7

为了完全覆盖 Bootstrap 按钮样式，您需要覆盖一系列属性。请参考下面的示例。

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

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

- Rahul Singh

---

这个方法非常棒，仅次于LESS Bootstrap定制化。 - Gianluca Ghettini

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。

- Ari

Answer 9

这里有一个非常简单和高效的方法： 在你的CSS中添加你想要应用于按钮的颜色的类：

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

并将样式添加到您的Bootstrap按钮或链接中：

并将样式添加到您的Bootstrap按钮或链接中：

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

- Fred

Answer 10

或者尝试使用http://twitterbootstrapbuttons.w3masters.nl/。它根据HTML颜色输入创建按钮CSS。在Bootstrap CSS之后添加CSS。它提供了三种样式的按钮（明亮、暗淡和旋转）。

- Bass Jobsen

---

这是一个配置器（类似的）。如果您急于为客户创建原型，那么它非常容易。但从长远来看，它不可维护。如果配置器消失了怎么办？因此，对于真正的事情，“lessc”是更好的解决方案。 - nalply