我如何覆盖bootstrap 5.0信息颜色，使它像bootstrap 3 & # 39s信息颜色？

在bootstrap 3中，信息颜色是#d9edf7。当使用bg-info或alert-info时，背景颜色总是#d9edf7。我正试图覆盖bootstrap 5.0来对信息颜色产生同样的效果。

我有一个cutom scss文件来覆盖引导程序:

如果我将info或cyan变量设置为#d9edf7，那么我的。bg-info元素看起来正确，但我的。提醒信息元素减轻了60%。

$info: #d9edf7;
    @import "../scss/bootstrap.scss";
    

如果我将info或cyan变量设置为#40a4d7，那么我的。alert-info元素看起来正确，但我的。bg-info元素比#d9edf7暗40%。

$info: #40a4d7;
    @import "../scss/bootstrap.scss";
    

我如何覆盖bootstrap以获得想要的效果？基本上，任何使用info颜色的东西都应该有一个#d9edf7的背景色。

link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    div class="alert alert-info" role="alert">
      A simple info alert—check it out!/div>
    div class="bg-info" style="width:100%;
     height:60px;
    ">
    This should have the same background color because they're both using the 'info' color/div>
    

引导程序5.0.2

因为颜色& quot缩放& quot在5.0中使用时，您需要通过将适当的颜色传递给alert-variant mixin来重新生成alert-info类...

@import "functions";
    @import "mixins";
    $info: #d9edf7;
    @import "variables";
    @import "bootstrap";
.alert-info {
        @include alert-variant($info, $info, shift-color($info, $alert-color-scale));
}
    

在这个例子中，我仍然使用了前景色的缩放，但是你可以使用$body-color来代替...

@include alert-variant($info，$info，$ body-color)；

https://codeply.com/p/k0MPD65ezI

引导数据库5.3.0

正如你将在文件中读到的...

"Sass mixin已弃用。警报变体现在有了它们的CSS变量在Sass中被覆盖循环& quot

因此，警告文本颜色、背景颜色、链接等有不同的颜色变量...在您的情况下，您可能希望覆盖$ info-BG-sceneous作为背景色:

$info: #d9edf7;
    $info-bg-subtle: #d9edf7;
    @import "bootstrap";
    

SASS演示

经过彻底调查，似乎导致您的Bootstrap 5.0问题的SASS变量是$alert-bg-scale。该变量在_variables.scss文件中声明，初始值为-80%。

$alert-bg-scale: 0%;
    $info: #d9edf7;
    @import "bootstrap.scss";
    

不幸的是，看起来获得你想要的行为不会像你希望的那么简单。如果修改此值，将使所有警报的背景颜色变暗。根据Carol Skelly的回答，他们似乎在以后的版本中解决了这个问题。

我能想到的几个变通办法是:

使用。alert-info class，无论您当前在哪里使用。血糖信息除了背景色之外，这个类只应用边框和文本颜色。

为。血糖信息类如果你坚决反对前面建议的设置边框和文本颜色的想法，这是可行的。但是，我建议不要这样做，因为这会修改Bootstrap的预期行为。或者，您可以创建自己的自定义类来完成这项工作。

$info: #d9edf7;
    @import "bootstrap.scss";
/*  By calling this after the Bootstrap import, you get access to all the  SASS functions, namely `shift-color()`*/.bg-info {
        background-color: shift-color($info, $alert-bg-scale) !important;
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！