更改Bootstrap 的主色以實現品牌對齊
將Bootstrap 與自訂品牌顏色結合使用時,有必要調整主色以保持一致性。雖然 Bootstrap 中沒有用於修改原色的直接按鈕,但使用 SASS(或 CSS)可以實現此自訂。
Bootstrap 5(v5.3 及更高版本)
對於Bootstrap 5.3 及以上版本,從Bootstrap 的SASS 檔案匯入函數和變數可以精確控制特定的顏色變數。使用現有$orange 變數的範例:
@import "functions"; @import "variables"; $primary: $orange; $theme-colors: map-merge($theme-colors, ("primary": $primary)); @import "bootstrap";
Bootstrap 5 (prior v5.3)
與Bootstrap 5.3 類似,SASS 覆蓋方法保持不變Bootstrap 5中,直接設定$primary變數會覆寫預設的primary
$primary: rebeccapurple; @import "bootstrap";
Bootstrap 4
在 Bootstrap 4 中,方法略有不同。在匯入 bootstrap.scss 之前定義 $primary 變數(或任何其他主題顏色)。
$primary: purple; $danger: red; @import "bootstrap";
其他選項
在某些情況下,引用現有的 Bootstrap 變數可能需要進行顏色自訂。以下是基於$purple 變數設定主色的範例:
@import "bootstrap/functions"; @import "bootstrap/variables"; $theme-colors: ( primary: $purple ); @import "bootstrap";
注意: 由於存在大量的-primary,單獨使用CSS 改變主色是一個更複雜的過程變化。建議使用 CSS 針對特定元件(例如用於顏色變更的按鈕)。
以上是如何更改 Bootstrap 的主色以配合我的品牌?的詳細內容。更多資訊請關注PHP中文網其他相關文章!