Bootstrap 4.1+的2019更新
现在，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)}
