如何更改 Bootstrap 4、5 和 5.3 中的主色？

自定义 Bootstrap 主色

更改 Bootstrap 中的默认主色是可行的，使您可以使配色方案与您的品牌标识保持一致。

Bootstrap 5.3（更新2023)

要修改原色，您可以利用现有的颜色变量 $orange，如下所示：

// Import necessary Bootstrap files
@import "functions";
@import "variables";

// Set the $primary variable to your desired color
$primary: orange;

// Merge the custom color with the existing $theme-colors map
$theme-colors: map-merge($theme-colors, ("primary": $primary));

// Apply the changes by importing Bootstrap
@import "bootstrap";

Bootstrap 5（2021 年更新）

在 Bootstrap 5 中，方法保持不变。您可以设置主题变量并导入 Bootstrap 样式表：

$primary: rebeccapurple;

// Ensure you use the full path to bootstrap.scss
@import "bootstrap";

Bootstrap 4

对于 Bootstrap 4，在导入 bootstrap.scss 之前设置适当的主题颜色变量：

$primary: purple;
$danger: red;

@import "bootstrap";

如果您希望从现有颜色中获取新颜色Bootstrap变量，先导入函数和变量文件：

@import "bootstrap/functions";
@import "bootstrap/variables";

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

@import "bootstrap";

以上是如何更改 Bootstrap 4、5 和 5.3 中的主色？的详细内容。更多信息请关注PHP中文网其他相关文章！