如何在Bootstrap中更改btn颜色

Question 1

有没有办法更改.btnBootstrap中的所有属性？我已经尝试过以下方法，但有时仍显示默认的蓝色（例如单击并删除鼠标后等）。如何完全更改整个主题？

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

Question 2

查看需要覆盖哪些属性的最简单方法是查看Bootstrap的源代码，尤其是mixins / buttons.less中.button-variant定义的mixin 。您仍然需要重写很多属性以摆脱所有样式（例如，下拉菜单中的用法等）。.btn-primary:focusdisabled

更好的方法可能是：

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

Question 3

如果要覆盖引导程序中的任何默认属性，则必须将这些属性设置为重要。

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

我希望这对您有用。

Question 4

Bootstrap 4的2019更新

现在，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模板和如何更改Bootstrap原色？

Question 5

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

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

。考虑到这一点，您的代码将如下所示：

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

展开摘要

Question 6

只需在以下位置创建您自己的按钮：

http://blog.koalite.com/bbg/
在boottrap.min.css的末尾添加CSS

干杯

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

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

Question 9

在最简单的方法是：

1）拦截每个按钮状态

2）添加!important覆盖状态

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

更实用的UI方法是使按钮的悬停状态比原始状态更暗：

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

Question 10

这是我的风味，又不会失去悬浮感。我个人喜欢它比标准的引导程序过渡更好。

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

.btn-primary:hover {
  background-color: #594671 !important;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>

展开摘要

Question 11

我最近遇到了类似的问题，并设法通过添加类来解决它

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

如果在input [type = submit]上使用了此类，也请注意[disabled]和[disabled]：hover。像这样：

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

Question 12

我认为使用!important不是一个非常明智的选择。特别是在使站点响应时，这可能会导致许多其他问题。因此，我的理解是，最好的方法是将自定义按钮CSS类与.btnbootstrap类一起使用。.btn是引导程序按钮的基本样式类。因此，将其保留为布局，我们可以使用自定义css类更改其他样式。我想在这里再提一件事。有些人试图从按钮上删除蓝色轮廓。这不是一个好主意，因为使用键盘时存在可访问性问题。outline-color:改用它的颜色。

Question 13

在上述@ Codeply-er的答案中为像我这样的SASS / SCSS新手添加逐步指南。

保存btnCustom.scss。

/* import the necessary Bootstrap files */
@import 'bootstrap';

/* Define color */
$mynewcolor:#77cccc;

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

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

下载诸如Koala之类的SASS编译器，以便可以将上述SCSS文件编译为CSS。
克隆Bootstrap github存储库，因为编译器需要在某个地方添加按钮变型mixins。
通过如下创建_bootstrap.scss文件来显式导入引导程序功能。这将允许编译器访问Bootstrap函数和变量。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

编译btnCustom.scss与先前下载的编译器的CSS。

Question 14

我不是这个答案的执行者，但是它帮助了我：

我想更改主页上引导轮播的下一个/上一个按钮的颜色。

解决方案： 从bootstrap.css复制选择器名称，然后将其移动到您自己的style.css（具有自己的首选项。）：

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

展开摘要