css - 如何更改 Bootstrap 原色？

Question

是否可以更改 bootstrap 原色以匹配品牌颜色？在我的案例中，我使用的是 bootswatch 的论文主题。

Answer 1

Bootstrap 5(2021 年更新)

Bootstrap 5 的方法仍然相同。

https://codeply.com/p/iauLPArGqE

Bootstrap 4

要更改 Bootstrap 4 SASS 中的主要或任何主题颜色，请在之前设置适当的变量em> 导入 bootstrap.scss。这允许您的自定义 scss 覆盖 !default 值...

$primary: purple;
$danger: red;

@import "bootstrap";

演示:https://codeply.com/go/f5OmhIdre3

---

在某些情况下，您可能希望从另一个现有 Bootstrap 变量设置新颜色。为此，首先@import 函数和变量，以便它们可以在自定义中引用...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

演示:https://codeply.com/go/lobGxGgfZE

---

另见: this answer 、 this answer 或 changing the button color in (CSS or SASS)

---

也可以使用 仅 CSS 更改原色，但它需要大量额外的 CSS，因为有许多 -primary 变体(btn-primary、alert- primary, bg-primary, text-primary, table-primary, border-primary, etc...)并且其中一些类在边框、悬停和事件状态上有轻微的颜色变化。因此，如果您必须使用 CSS，最好使用目标组件，例如更改 primary button color 。