如何更改引导原色? [英] How to change the bootstrap primary color?

问题描述

是否可以更改引导程序原色以匹配品牌颜色?我正在使用bootswatch的纸张主题.

Is it possible to change the bootstrap primary color to match to the brand color? I am using bootswatch's paper theme in my case.

推荐答案

Bootstrap 4的2020更新

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

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the !default values...

$primary: purple;
$danger: red;

@import "bootstrap";

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

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

In some cases, you may want to set a new color from another existing Bootstrap variable. For this @import the functions and variables first so they can be referenced in the customizations...

/* 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

另请参阅:此答案，在(CSS或SASS)中更改按钮颜色

也可以仅使用 CSS 来更改原色，但是由于存在许多-primary变体(btn-primary，alert-primary，bg-primary， text-primary，table-primary，border-primary等)，其中某些类的边框，悬停和活动状态的颜色略有变化.因此，如果必须使用CSS，则最好使用目标一个组件，例如更改主按钮颜色.

It's also possible to change the primary color with CSS only but it requires a lot of additional CSS since there are many -primary variations (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc...) and some of these classes have slight colors variations on borders, hover, and active states. Therefore, if you must use CSS it's better to use target one component such as changing the primary button color.

这些解决方案也适用于 Bootstrap 5 alpha

These solutions will also work for Bootstrap 5 alpha

这篇关于如何更改引导原色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！