如何在Bootstrap中更改btn颜色

Question

有没有办法改变.btnBootstrap中的所有属性？我尝试了下面的,但有时它仍然显示默认的蓝色(比如点击并删除鼠标等).我怎样才能完全改变整个主题？

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}

Answer 1

如果要覆盖引导程序中的任何默认属性,则必须使属性变得重要.

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

我希望这对你有用.

Answer 2

我猜你忘记了.btn-primary:focus属性和逗号之后.btn-primary

你也可以使用less并重新定义variables.less文件中的一些颜色

考虑到这一点,你的代码将如下所示:

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

Answer 3

2018年Bootstrap 4更新

现在Bootstrap 4使用SASS,您可以使用mixins 轻松更改主按钮颜色button-variant:

$mynewcolor:#77cccc;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

https://www.codeply.com/go/2bHYxYSC0n(SASS演示)

这个SASS编译成以下CSS ...

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

https://www.codeply.com/go/lD3tUE01lo(CSS演示)

要更改所有类的主要颜色,请参阅:自定义Bootstrap CSS模板以及如何更改引导原色？

Answer 4

查看需要覆盖哪些属性的最简单方法是查看Bootstrap的源代码,特别是mixins/buttons.less中.button-variant定义的mixin .你仍然需要覆盖相当多的属性来摆脱所有的样式(例如,下拉菜单中的使用等)..btn-primary:focusdisabled

更好的方法可能是:

1. 使用Bootstrap的在线自定义工具创建自己的自定义Bootstrap版本
2. 手动创建自己的颜色类,例如 .btn-whatever
3. 使用LESS编译器并使用.button-variantmixin创建自己的颜色类,例如.btn-whatever

Answer 5

只需创建自己的按钮:

• http://blog.koalite.com/bbg/
• 在boottrap.min.css的最后添加CSS

干杯

Answer 6

在最简单的的方法是：

1. 拦截每个按钮状态

2. 添加!important以覆盖状态

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary:visited,
    .btn-primary:focus {
      background-color: black !important;
      border-color: black !important;
    }

或者更实用的UI方式是让按钮的悬停状态比原来的状态更暗。只需使用下面的 CSS 片段：

.btn-primary {
  background-color: Blue !important;
  border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: DarkBlue !important;
  border-color: DarkBlue !important;
}

Answer 7

您错过了一种样式“ .btn-primary：active：focus”，该样式会导致在btn单击期间，默认引导程序颜色仍然显示一秒钟。这在我的代码中有效：

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}

Answer 8

删除像“btn-success”这样的按钮颜色类并放置一个像“btn-custom”这样的自定义类并为该类编写css。这对我很有效。

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}