如何更改或自定义警报颜色bootstrap 4和Ruby on Rails 5

Question

我正在使用引导程序gem 4.0.0.beta2.1，Rails 5.1.4和标准的引导程序警报（类：“ alert alert-info”）。它们很好，但不适合我的样式。我想以白色为背景。如何自定义？有什么办法可以更改Bootstrap4变量？

Answer 1

您可以将自定义类添加到警报 div。就我而言，我添加了“alert-custom”类而不是 alert-* 并将 css 应用于它，如下所示

html：

<div class="alert alert-custom  fade in alert-dismissable show" style="margin-top:18px;">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true" style="font-size:20px">×</span>
  </button>    <strong>Success!</strong> This alert box indicates a successful or positive action.
</div>

CSS：

.alert-custom{
  background-color:#6089D5;
  color:#fff;
}

供您参考：JSFiddle

Answer 2

在Bootstrap的中_variables.scss，有一些与警报颜色有关的变量：

$alert-bg-level:     -10 !default;
$alert-border-level:  -9 !default;
$alert-color-level:    6 !default;

我在文档中找不到任何提及，但是这些值似乎可以调整应用于警报的任何类（例如alert-primary）传递的颜色的明暗程度。

因此，例如，如果重写$alert-bg-level用0，背景颜色.alert-primary将是相同的任何颜色你已经被定义为$primary，而值10将使其变暗或值-10将使其更轻。

背景和边框颜色使用的规模-10来10，而文字颜色似乎使用的规模0来10。