如何更改引导程序原色？

Question

是否可以更改引导程序原色以匹配品牌颜色？在我的案例中，我使用的是 bootswatch 的纸质主题。

原文由 ashishjmeshram 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

引导程序 5（2021 年更新）

Bootstrap 5 的方法仍然相同。

https://codeply.com/p/iauLPArGqE

引导程序 4

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

 $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 或 更改（CSS或SASS）中的按钮颜色

---

也可以 仅使用 CSS 更改原色，但它需要大量额外的 CSS，因为有许多 -primary 变体（btn-primary、alert-primary、bg-primary、text-primary、table- primary、border-primary 等），其中一些类在边框、悬停和活动状态上有轻微的颜色变化。因此，如果您必须使用 CSS，最好使用目标一个组件，例如更改 主按钮颜色。

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我已经创建了这个工具： https ://lingtalfi.com/bootstrap4-color-generator，您只需将 primary 放在第一个字段中，然后选择您的颜色，然后单击生成。

然后复制生成的 scss 或 css 代码，并将其粘贴到名为 my-colors.scss 或 my-colors.css（或任何您想要的名称）的文件中。

一旦 将 scss 编译成 css ，就可以在引导 CSS 之后 包含该 css 文件，这样就可以了。

如果您了解了要点，整个过程大约需要 10 秒，前提是 my-colors.scss 文件已经创建并包含在您的 head 标签中。

注意：此工具可用于覆盖 bootstrap 的默认颜色（主要、次要、危险…），但您也可以根据需要创建自定义颜色（蓝色、绿色、三色…）。

注意 2：此工具适用于 bootstrap 4（即目前不是任何后续版本）。

原文由 ling 发布，翻译遵循 CC BY-SA 4.0 许可协议