CSS 如何更改引导程序版本 4 按钮颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49184471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change bootstrap version 4 button color
提问by Janier
I can change the primary button color by changing the theme-color in bootstrap v4. But it affects all other components as well. How to set the primary button colour without affecting the theme color? I dont want to set brand-primary and achieve it.Any other alternatives?
我可以通过更改 bootstrap v4 中的主题颜色来更改主按钮颜色。但它也会影响所有其他组件。如何在不影响主题颜色的情况下设置主按钮颜色？我不想设置品牌主要并实现它。还有其他选择吗？
回答by Zim
2019 Update for Bootstrap 4.1+
2019 年 Bootstrap 4.1+ 更新
Now that Bootstrap 4 uses SASS, you can easily change only the button colorusing the button-variantmixins. Since you only want to change the primary button color, and not the entire primary theme color, you need to use the button-variantmixins in SASS. You can set whatever $mynewcolorand/or lighten()and darken()percentages you'd like.
现在 Bootstrap 4 使用 SASS，您可以使用mixins轻松更改按钮颜色button-variant。由于您只想更改主按钮颜色，而不是整个主主题颜色，因此您需要使用button-variantSASS 中的mixins。您可以设置任何$mynewcolor和/或lighten()和darken()你想的百分比。
$mynewcolor:teal;
.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/f3uTwmsCVZ(SASS demo)
https://www.codeply.com/go/f3uTwmsCVZ（SASS演示）
This SASS compiles into the following CSS...
这个 SASS 编译成以下 CSS ...
.btn-primary{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:hover{color:#fff;background-color:#004d4d;border-color:#009a9a}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#00b3b3;border-color:#000}
.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(0,90,90,0.5)}
.btn-outline-primary{color:teal;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:teal}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:teal;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:#fff;background-color:#009a9a;border-color:teal}
.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(0,128,128,0.5)}
https://www.codeply.com/go/l9UGO7J6V1(CSS demo)
https://www.codeply.com/go/l9UGO7J6V1（CSS演示）
To change the primary color for allcontextual classes (bg-primary, alert-primary, etc..) see: Customizing Bootstrap CSS templateand How to change the bootstrap primary color?
要更改所有上下文类（bg-primary、alert-primary 等）的主要颜色，请参阅：自定义 Bootstrap CSS 模板和如何更改引导程序主要颜色？
Also see:
https://stackoverflow.com/a/50973207/171456
How to theme bootstrap
回答by vml
You can add custom color or redefine colors by change them via variables in sass files (Bootstrap 4).
您可以通过 sass 文件 (Bootstrap 4) 中的变量更改自定义颜色或重新定义颜色。
$theme-colors: (
primary: red,
);
@import "~bootstrap/scss/bootstrap";
If you use same keys for your colors, you will redefine Bootstrap. Otherwise, with new keys you create new classes.
如果您对颜色使用相同的键，您将重新定义 Bootstrap。否则，使用新键创建新类。
This example set primary color from blue to red.
本示例将原色从 blue设置为 red。
回答by Athul
Try this method
试试这个方法
Add a classto the button, Here custom-btnand write the css for that in our stylesheet.
向, Here custom-btn添加一个类button，并在我们的样式表中为其编写 css 。
.btn-primary.custom-btn {
background-color: #000;
border-color: #000;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<button type="button" class="btn btn-primary custom-btn">Custom</button>
<button type="button" class="btn btn-primary">Default</button>
</div>回答by Dhaval
As per bootstrap documentation
根据引导程序文档
Many of Bootstrap's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger). These modifier classes are built from the $theme-colors map to make customizing the number and name of our modifier classes.
Bootstrap 的许多组件都是使用基本修饰符类方法构建的。这意味着大部分样式都包含在基类（例如 .btn）中，而样式变体仅限于修饰符类（例如 .btn-danger）。这些修饰符类是从 $theme-colors 映射构建的，用于自定义修饰符类的数量和名称。
So If you change theme color then it will affect all.
所以如果你改变主题颜色，那么它会影响所有。
Maybe you should add color in $theme-colorsvariable if you want to use that color other places as well.
如果您想在其他地方也使用该颜色，也许您应该在$theme-colors变量中添加颜色。
回答by Jean-Marc Zimmer
I had a similar problem: I wanted to make the button match its container colors.
我有一个类似的问题：我想让按钮与其容器颜色相匹配。
So I created a btn class that adapts automatically to its parent color on page load. I'm pretty happy with the result (In fact I'm even creating a little plugin). JSfiddle here
所以我创建了一个 btn 类，它在页面加载时自动适应其父颜色。我对结果很满意（事实上我什至正在创建一个小插件）。JSfiddle在这里
/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/
$(function() {
const hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
function hexify(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function darken(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "rgb(" + parseInt(0.9 * rgb[1]) + ',' + parseInt(0.88 * rgb[2]) + ',' + parseInt(0.87 * rgb[3]) + ')';
}
function getParentBackground($elem) {
var color = $elem.css("background-color");
if (color && color !== 'rgba(0, 0, 0, 0)')
return color;
return ($elem.is('body') ? false : getParentBackground($elem.parent()));
}
function getParentColor($elem) {
var color = $elem.css("color");
if (color && color !== 'rgba(0, 0, 0, 0)')
return color;
return ($elem.is('body') ? false : getParentColor($elem.parent()));
}
$('.btn-negative, .btn-outline-negative').each(function() {
var bgColor = hexify(getParentBackground($(this).parent()));
var color = hexify(getParentColor($(this).parent()));
var rgb = getParentColor($(this).parent());
this.style.setProperty('--btn-negative-color0', bgColor);
this.style.setProperty('--btn-negative-color1', color);
this.style.setProperty('--btn-negative-shadow-color', color + "88");
this.style.setProperty('--btn-negative-color2', hexify(darken(rgb)));
this.style.setProperty('--btn-negative-color3', hexify(darken(darken(rgb))));
});
});/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/
.btn-negative::before,
.btn-outline-negative::before {
--btn-negative-color0: #fff;
--btn-negative-color1: #000;
--btn-negative-color2: #000;
--btn-negative-color3: #000;
--btn-negative-shadow-color: #0008;
}
.btn-outline-negative {
background-color: var(--btn-negative-color0);
border: solid 1px var(--btn-negative-color1);
color: var(--btn-negative-color1);
}
.btn-negative,
.btn-outline-negative.active,
.btn-outline-negative:hover:not(.disabled):not([disabled]),
.btn-outline-negative:active:not(.disabled):not([disabled]) {
background-color: var(--btn-negative-color1);
color: var(--btn-negative-color0);
}
.btn-negative.active,
.btn-negative:hover:not(.disabled):not([disabled]),
.btn-negative:active:not(.disabled):not([disabled]) {
background-color: var(--btn-negative-color2);
color: var(--btn-negative-color1);
}
.btn-negative.active:hover,
.btn-negative:hover:active:not(.disabled):not([disabled]) {
background-color: var(--btn-negative-color3);
color: var(--btn-negative-color1);
}
.btn-negative:focus,
.btn-outline-negative:focus {
box-shadow: 0 0 0 .2rem var(--btn-negative-shadow-color);
}<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" type="text/javascript"></script>
<div class="container">
<div class="alert alert-success">
<p>Some text...</p>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-negative">btn-negative</button>
<button class="btn btn-outline-success">btn-outline-success</button>
<button class="btn btn-outline-negative">btn-outline-negative</button>
</div>
</div>Due to the CSS call order in the snippet, the style doesn't apply correctly.
由于代码段中的 CSS 调用顺序，样式无法正确应用。
Any idea to make it better is welcomed !
欢迎任何让它变得更好的想法！
回答by Mauro Barrionuevo
You have to create a custom css sheet and override the button style or add the button a new class and override some of the properties.
您必须创建一个自定义 css 表并覆盖按钮样式或为按钮添加一个新类并覆盖一些属性。
<button class="btn-primary">Button</button>
.btn-primary{
background-color:black;
}
<button class="btn-primary custom-btn-class">Button</button>
.custom-btn-class{
background-color:black;
}
回答by Justas
<a class="btn btn-secondary" href="#">Find out more</a>
.featured .btn-secondary {
font-weight: bold;
background-color: blue;
}
Just edit in css it works for me
只需在 css 中编辑它对我有用
