如何自訂Bootstrap的主色？

自訂 Bootstrap 的主色

Bootstrap 提供了一個通用的方法來自訂其主色以符合專案的品牌識別。以下是實現此目的的步驟：

Bootstrap 5.3

透過將其與現有的$theme-colors 映射合併來自訂主顏色：

@import "functions";
@import "variables";

$primary: $orange; // Custom primary color

$theme-colors: map-merge($theme-colors, (
  "primary": $primary
));

@import "bootstrap";

引導程式5

只需覆寫 $primary 變數並匯入 Bootstrap 樣式表：

$primary: rebeccapurple;

@import "bootstrap";

Bootstrap 4

設定之前的主色輸入Bootstrap：

$primary: purple;
$danger: red;

@import "bootstrap";

進階自訂

要進行更進階的自訂，您可以引用現有的Bootstrap 變數來定義自訂顏色：

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

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

@import "bootstrap";

僅限 CSS自訂

雖然可能，但僅 CSS 的自訂需要大量修改才能解決 Bootstrap 元件之間的各種顏色變化。建議使用 CSS 針對特定元件（例如按鈕）進行顏色變更。

以上是如何自訂Bootstrap的主色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！