如何更改Bootstrap版本4按钮颜色

  • Z时代
  • 2024-01-10
  • 分类：问答

我可以通过更改bootstrap

v4中的主题颜色来更改主按钮的颜色。但这也会影响所有其他组件。如何设置主按钮颜色而不影响主题颜色？我不想设置主要品牌并实现这一目标。还有其他选择吗？

回答：

现在，Bootstrap 4使用了SASS，您可以使用mixins 轻松地 button-

variant。由于您只想更改主按钮的颜色，而不是整个主主题的颜色，因此您需要button-

variant在SASS中使用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);
}

该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)}

以上是 如何更改Bootstrap版本4按钮颜色 的全部内容， 来源链接： utcz.com/qa/427947.html

回到顶部