如何更改Bootstrap版本4按钮的颜色 [英] how to change bootstrap version 4 button color
问题描述
我可以通过更改bootstrap v4中的主题颜色来更改主按钮的颜色.但这也会影响所有其他组件. 如何在不影响主题颜色的情况下设置主按钮颜色? 我不想设置主要品牌并实现这一目标.还有其他选择吗?
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?
推荐答案
2019年Bootstrap 4.1+更新
现在,Bootstrap 4使用SASS,您可以使用button-variant
mixins轻松地仅更改按钮颜色.由于您只想更改主按钮的颜色,而不是整个主主题的颜色,因此需要在SASS中使用button-variant
mixins.您可以设置任意的$mynewcolor
和/或lighten()
和darken()
百分比.
Now that Bootstrap 4 uses SASS, you can easily change only the button color using the button-variant
mixins. Since you only want to change the primary button color, and not the entire primary theme color, you need to use the button-variant
mixins in SASS. You can set whatever $mynewcolor
and/or lighten()
and darken()
percentages you'd like.
$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演示)
此SASS编译为以下CSS ...
This SASS compiles into the following 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演示)
要更改 all 个上下文类(bg-primary,alert-primary等)的原色,请参见:如何更改引导程序原色?
To change the primary color for all contextual classes (bg-primary, alert-primary, etc..) see: Customizing Bootstrap CSS template and How to change the bootstrap primary color?
另请参阅:
https://stackoverflow.com/a/50973207/171456
如何进行主题引导
Also see:
https://stackoverflow.com/a/50973207/171456
How to theme bootstrap
这篇关于如何更改Bootstrap版本4按钮的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!