html - 用内部 CSS 覆盖主要的 Bootstrap 4 颜色

Question

我需要将默认的主要 Bootstrap 4 颜色(加载 Bootstrap 样式表后)更改为自定义颜色(由用户选择)，用于具有内部 CSS 样式表的动态 Bootstrap 组件。例如，我可以做 .btn-primary { background-color: red; 但这只适用于按钮，但是，它不会改变其他 btn 主要状态，如 ":hover"、":active"和 “已禁用”。它也不会改变 .alert-primary、.text-primary、.bg-primary、.btn-outline-primary、.badge-primary 的整个 CSS 中的“主要”颜色，等等……

可能的解决方案是什么？

Answer 1

您需要下载 Bootstrap Sass 文件。您可以从 this link .

一旦你有了它们，你就可以打开主 bootstrap .scss 文件并搜索:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

将“primary”更改为您需要的内容，然后重新编译为 CSS。如果您的机器上没有安装 Sass，您可以使用各种在线工具来完成此操作。 Example .

来源:https://getbootstrap.com/docs/4.3/getting-started/theming/