如何改变 btn 颜色在引导

小开

如果要重写 Bootstrap 中的任何默认属性，必须使这些属性同等重要。

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

我希望这对你有用。

小开

我猜你在 .btn-primary < br > < br > 之后忘记了 .btn-primary:focus的属性和逗号。你也可以使用 less，并重新定义变量中的一些颜色。 less 文件 < br > < br > 记住这一点，你的代码将会是这样的:

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

小开

最佳答案

查看需要覆盖哪些属性的最简单方法是查看引导程序的源代码，特别是在混合/按钮，更少中定义的 .button-variant混合。您仍然需要覆盖相当多的属性来去除所有的 .btn-primary样式(例如 :focus、 disabled、下拉列表中的使用等)。

更好的办法可能是:

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

小开

Just create your own button on:

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

干杯

小开

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

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

另外，如果这个类用于输入[ type = mit ] ，那么还需要注意以下几点:

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

小开

I think using !important is not a very wise option. It may cause for many other issues specially when making the site responsive. So, my understanding is that, the best way to do this to use custom button CSS class with .btn bootstrap class. .btn is the base style class for bootstrap button. So, keep that as the layout, we can change other styles using our custom css class. 我还有一件事要说。有些人正试图从按钮上去除蓝色的轮廓。这不是一个好主意，因为在使用键盘时存在可访问性问题。改变它的颜色使用 outline-color:代替。

小开

你已经错过了一种风格。”。Btn-basic: active: focus”，这会导致在 btn 单击默认引导程序时仍然出现一秒钟的颜色。这在我的代码中起作用:

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

小开

2022年5号引导程序更新

Bootstrap 5具有相同的 button-variant和 button-outline-variant SASS 混音，可用于定制按钮颜色后，自举是进口..。

/* import the Bootstrap */
@import "bootstrap";


/* ------- customize primary button color -------- */
$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://codeply.com/p/unvb5hrsff

2019年引导程序4的更新

现在 Bootstrap 4使用 SASS，您可以很容易地使用 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://codeply.com/p/jnv3xddiah (SASS demo)

此 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://codeply.com/go/ld3tue01lo (CSS 演示)

要更改 all类的主颜色，请参见: 自定义引导 CSS 模板和如何更改引导程序的主颜色？

小开

删除按钮颜色类，如“ btn-Success”，并放置一个自定义类，如“ btn-custom”，并为该类编写 css。这对我来说很简单。

HTML :


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


CSS:


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

小开

Here's my flavor without the loss of hover. I personally like it better than the standard bootstrap transitioning.

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

小开

最简单的的方法是:

拦截每个按钮状态
添加 !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;
}

小开

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

Save 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);
}

下载 SASS 编译器，例如考拉，以便将上面的 SCSS 文件编译成 CSS。
克隆鞋带 github repo，因为编译器需要某个地方的按钮变体 Mixin。
通过创建 _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。

小开

我不是这个回答的操作员，但它帮助了我:

我想改变我主页上引导旋转木马的下一个/上一个按钮的颜色。

解决方案: 复制 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;
}

小开

您可以在配置文件(例如 variables.scss)中使用自举主题化添加自定义颜色，并确保在编译时在引导之前导入该文件。

$theme-colors: (
"whatever": #900
);

现在你可以做 .btn-whatever了

小开

下面是我对“大纲”按钮的参与:

用你的颜色代替 #8e5b5b，用你的颜色代替 #b3a7a7，但通常更明亮。

.btn-outline-custom{
color: #8e5b5b;
border-color: #8e5b5b;
}


.btn-outline-custom:focus{
box-shadow: 0 0 0 0.2rem #b3a7a7;
-webkit-box-shadow: 0 0 0 0.2rem #b3a7a7;
outline: 0;
}


.btn-outline-custom:hover,
.btn-outline-custom:active{
color: #fff;
background-color: #8e5b5b;
border-color: #8e5b5b;
}

小开

如果你想用一种颜色包括按钮边框来覆盖整个按钮，这里有很多复杂而冗长的 CSS:

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

小开

对于 Bootstrap 5，正确的方法是简单地覆盖 $primary主题颜色:

Simply add the following to your Bootstrap overrides file (ie: could be named 'Core.scss' for example:

//
// Bootstrap
//
// overrides
$primary: /*new colour*/orange;

这是官方文件: https://getbootstrap.com/docs/5.0/customize/sass/#modify-map