如何更改引导程序版本 4 按钮颜色

Question

我可以通过更改 bootstrap v4 中的主题颜色来更改主按钮颜色。但它也会影响所有其他组件。如何在不影响主题颜色的情况下设置主按钮颜色？我不想设置品牌为主并实现它。还有其他选择吗？

原文由 Janier 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 4.1+ 的 2019 年更新

现在 Bootstrap 4 使用 SASS，您可以使用 button-variant mixins 轻松 更改按钮颜色。由于您只想更改主按钮颜色，而不是整个主主题颜色，因此您需要使用 SASS 中的 button-variant 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 演示）

这个 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 演示）

---

要更改 所有 上下文类（bg-primary、alert-primary 等）的原色，请参阅： 自定义引导 CSS 模板 和 如何更改引导原色？

另见：

https://stackoverflow.com/a/50973207/171456

如何主题引导

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以通过 sass 文件 (Bootstrap 4) 中的变量更改颜色来添加自定义颜色或重新定义颜色。

 $theme-colors: (
   primary: red,
);
@import "~bootstrap/scss/bootstrap";

如果您对颜色使用相同的键，您将重新定义 Bootstrap。否则，您可以使用新键创建新类。

此示例将 原色从 blue 设置为 red 。

原文由 vml 发布，翻译遵循 CC BY-SA 4.0 许可协议