Question

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

Answer 1

在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的比例。

Answer 2

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

HTML：

extra_pay

CSS：

<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>

供参考：JSFiddle

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

2 个答案: