在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  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;
}