如何将 Bootstrap 微调器的颜色更改为文本颜色实用程序以外的颜色？

Question

我在网页中包含了一个 Bootstrap-4 微调器（如此处所述），但似乎只能使用文本颜色实用程序中的颜色（主要、警告、成功...），这是相当有限的。我希望能够将网页的主题以及微调器的颜色更改为不是文本颜色实用程序之一的颜色。可以这样做吗？如何做？

Answer 1

嗯，你可以做的一件事是，

<div class="spinner-border" role="status" style="color: darkgreen">
  <span class="sr-only">Loading...</span>
</div>

Answer 2

您可以将 bootstrap spinner 的颜色更改为任何您喜欢的颜色。您只需要设置微调器的color 属性。

.text-red {
  color: red;
}
.text-blue {
  color: blue;
}
.text-orange {
  color: orange;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="spinner-border text-red" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border text-blue" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border text-orange" role="status">
  <span class="sr-only">Loading...</span>
</div>

如何将 Bootstrap 微调器的颜色更改为文本颜色实用程序以外的颜色？

How to change Bootstrap spinners' color to other than text color utilities?

css

colors

bootstrap-4

css-color