如何更改 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中文網其他相關文章！