Bootstrap: 设置自定义颜色

Question

我正在项目中使用 bootstrap 4.0.0。我知道 bootstrap 定义了诸如 --primary 之类的变量来定义按钮的颜色（在本例中为 .btn-primary）。相反，我想要我的自定义颜色。但是，我没有设法设置另一种 "primary" 颜色，甚至在 HTML 文件中 bootstrap.css 的 <link> 标记之前或之后插入了以下代码片段。

<style>
  :root {
     --primary: #009c68;
  }
</style>

Answer 1

嘿 Jdias

我在看你的问题。

据我所知，原因非常明显。 Bootstrap 最初是用 SCSS 编写的，因此当它被编译为 CSS 时，它实际上确实使用了颜色代码，而不是 CSS 中的 var(--primary) ,

bootstrap css 文件中的代码是（来源是 GIT BOOTSTRAP 的回购）：

.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

而不是

.btn-primary {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

如果您想自定义此选项，您必须下载文件而不是 CDN 并编辑 SCSS 并编译它。

希望能帮到你

Answer 2

您可以通过添加“!important;”来覆盖 bootstrap 样式例如，在您的 html 中，您可能有这样的内容：

<button type="button" class="btn btn-primary">Primary</button>

您可以这样更改颜色：

<button type="button" class="btn" style="background-color: #009c68!important;">Primary</button>

在CSS中，!important表示“this is important”，忽略后面的所有规则，应用!important规则。如需更多信息，您可以前往 here.

如果此答案不适用于您给定的情况，我建议您查看 Bootstrap 主题。可以找到说明如何自定义 Bootstrap 4 和修改现有颜色的文档 here。

Answer 3

将 :root CSS variables 视为 --primary 为 "read-only"。它们可以被引用为..

background-color: var(--primary)

但是，尝试更改 --primary 的原始值将无济于事：

:root {
     --primary: #009c68;
}

这没有效果，因为 Bootstrap 的 CSS 是从 SASS 变量编译而来的。

要change/overridebtn-primary的颜色你应该看到这些问题：

Bootstrap: 设置自定义颜色

Bootstrap: setting custom colors

css-variables

bootstrap-4

嘿 Jdias

bootstrap css 文件中的代码是（来源是 GIT BOOTSTRAP 的回购）：

而不是