主題引導
使用我們新的內置 Sass 變量自定義 Bootstrap 4,以實現全局樣式偏好,以便輕鬆進行主題化和組件更改。
介紹
在 Bootstrap 3 中,主題主要由 LESS 中的變量覆蓋、自定義 CSS 和我們包含在dist
文件中的單獨主題樣式表驅動。通過一些努力,可以完全重新設計 Bootstrap 3 的外觀,而無需觸及核心文件。Bootstrap 4 提供了一種熟悉但略有不同的方法。
現在,主題化由 Sass 變量、Sass 映射和自定義 CSS 完成。不再有專門的主題樣式表;相反,您可以啟用內置主題來添加漸變、陰影等。
薩斯
在使用您自己的資產管道編譯 Sass時,利用我們的 Sass 源文件來利用變量、映射、mixin 等。
文件結構
盡可能避免修改 Bootstrap 的核心文件。對於 Sass,這意味著創建您自己的導入 Bootstrap 的樣式表,以便您可以修改和擴展它。假設您使用的是像 npm 這樣的包管理器,您將擁有如下所示的文件結構:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
如果您已經下載了我們的源文件並且沒有使用包管理器,那麼您需要手動設置類似於該結構的東西,將 Bootstrap 的源文件與您自己的源文件分開。
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
輸入
在您的custom.scss
中,您將導入 Bootstrap 的源 Sass 文件。你有兩個選擇:包括所有的 Bootstrap,或者選擇你需要的部分。我們鼓勵後者,但請注意我們的組件之間存在一些要求和依賴關係。您還需要為我們的插件添加一些 JavaScript。
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
有了這個設置,你就可以開始修改你的custom.scss
. 您也可以根據需要開始在該部分下添加部分 Bootstrap // Optional
。我們建議使用我們bootstrap.scss
文件中的完整導入堆棧作為您的起點。
變量默認值
Bootstrap 中的每個 Sass 變量都包含一個!default
標誌,允許您在自己的 Sass 中覆蓋變量的默認值,而無需修改 Bootstrap 的源代碼。根據需要復制和粘貼變量,修改它們的值,然後刪除!default
標誌。如果一個變量已經被賦值,那麼它不會被 Bootstrap 中的默認值重新賦值。
您將在 中找到 Bootstrap 變量的完整列表scss/_variables.scss
。一些變量設置為null
,這些變量不會輸出屬性,除非它們在您的配置中被覆蓋。
變量覆蓋必須在我們的函數、變量和 mixin 被導入之後,但在其餘的導入之前。
這是一個在通過 npm 導入和編譯 Bootstrap 時更改background-color
andcolor
的示例:<body>
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
根據需要對 Bootstrap 中的任何變量重複,包括下面的全局選項。
地圖和循環
Bootstrap 4 包含一些 Sass 映射,鍵值對可以更輕鬆地生成相關 CSS 族。我們將 Sass 映射用於我們的顏色、網格斷點等。就像 Sass 變量一樣,所有 Sass 映射都包含!default
標誌並且可以被覆蓋和擴展。
默認情況下,我們的一些 Sass 映射會合併為空映射。這樣做是為了方便擴展給定的 Sass 地圖,但代價是從地圖中刪除項目稍微困難一些。
修改地圖
要修改我們地圖中的現有顏色$theme-colors
,請將以下內容添加到您的自定義 Sass 文件中:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
添加到地圖
要向 中添加新顏色$theme-colors
,請添加新鍵和值:
$theme-colors: (
"custom-color": #900
);
從地圖中移除
要從$theme-colors
或任何其他地圖中刪除顏色,請使用map-remove
。請注意,您必須在我們的要求和選項之間插入它:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
必需的鍵
Bootstrap 假設 Sass 映射中存在一些特定的鍵,因為我們自己使用並擴展了這些鍵。當您自定義包含的映射時,您可能會遇到使用特定 Sass 映射鍵的錯誤。
例如,我們使用鏈接、按鈕和表單狀態中的primary
、success
和danger
鍵。$theme-colors
替換這些鍵的值應該沒有問題,但刪除它們可能會導致 Sass 編譯問題。在這些情況下,您需要修改使用這些值的 Sass 代碼。
功能
Bootstrap 使用了幾個 Sass 函數,但只有一個子集適用於一般主題。我們包含了三個用於從顏色圖中獲取值的函數:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
這些允許您從 Sass 映射中選擇一種顏色,就像您使用 v3 中的顏色變量一樣。
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
我們還有另一個函數可以從地圖中獲取特定級別的顏色。$theme-colors
負電平值會使顏色變亮,而較高的電平值會變暗。
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
在實踐中,您將調用該函數並傳入兩個參數:顏色的名稱$theme-colors
(例如,主要或危險)和數字級別。
.custom-element {
color: theme-color-level(primary, -10);
}
將來可以添加其他功能,或者您自己的自定義 Sass 來為其他 Sass 地圖創建關卡功能,如果您想要更詳細,甚至可以使用通用功能。
顏色對比
我們在 Bootstrap 中包含的另一個功能是顏色對比功能,color-yiq
. 它利用YIQ 顏色空間根據指定的基色自動返回淺色 ( #fff
) 或深色 ( #111
) 對比色。此函數對於生成多個類的混合或循環特別有用。
例如,要從我們的$theme-colors
地圖生成色樣:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
它也可用於一次性對比需求:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
您還可以使用我們的顏色映射函數指定基色:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
轉義 SVG
我們使用該escape-svg
函數來轉義<
,>
和#
SVG 背景圖像的字符。這些字符需要轉義才能在 IE 中正確呈現背景圖像。使用該escape-svg
函數時,必須引用數據 URI。
加減函數
我們使用add
andsubtract
函數來包裝 CSScalc
函數。這些函數的主要目的是避免將“無單位”0
值傳遞給calc
表達式時出現錯誤。像這樣的表達式calc(10px - 0)
將在所有瀏覽器中返回錯誤,儘管在數學上是正確的。
計算有效的示例:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
計算無效的示例:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
薩斯選項
使用我們內置的自定義變量文件自定義 Bootstrap 4,並使用新的$enable-*
Sass 變量輕鬆切換全局 CSS 首選項。覆蓋變量的值並npm run test
根據需要重新編譯。
scss/_variables.scss
您可以在 Bootstrap 的文件中為關鍵的全局選項找到並自定義這些變量。
多變的 | 價值觀 | 描述 |
---|---|---|
$spacer |
1rem (默認),或任何值 > 0 |
指定默認間隔值以編程方式生成我們的間隔實用程序。 |
$enable-rounded |
true (默認)或false |
在各種組件上啟用預定義border-radius 樣式。 |
$enable-shadows |
true 或false (默認) |
box-shadow 在各種組件上啟用預定義的裝飾樣式。不影響box-shadow 用於焦點狀態的 s。 |
$enable-gradients |
true 或false (默認) |
background-image 通過各種組件上的樣式啟用預定義漸變。 |
$enable-transitions |
true (默認)或false |
transition 在各種組件上啟用預定義的 s。 |
$enable-prefers-reduced-motion-media-query |
true (默認)或false |
啟用prefers-reduced-motion 媒體查詢,它會根據用戶的瀏覽器/操作系統首選項抑制某些動畫/過渡。 |
$enable-hover-media-query |
true 或false (默認) |
已棄用 |
$enable-grid-classes |
true (默認)或false |
允許為網格系統生成 CSS 類(例如 、、.container 等)。.row .col-md-1 |
$enable-caret |
true (默認)或false |
在 上啟用偽元素插入符號.dropdown-toggle 。 |
$enable-pointer-cursor-for-buttons |
true (默認)或false |
將“手”光標添加到非禁用按鈕元素。 |
$enable-print-styles |
true (默認)或false |
啟用樣式以優化打印。 |
$enable-responsive-font-sizes |
true 或false (默認) |
啟用響應式字體大小。 |
$enable-validation-icons |
true (默認)或false |
啟用background-image 文本輸入中的圖標和一些用於驗證狀態的自定義表單。 |
$enable-deprecation-messages |
true (默認)或false |
設置為false 在使用任何計劃在v5 . |
顏色
許多 Bootstrap 的各種組件和實用程序都是通過在 Sass 映射中定義的一系列顏色構建的。這張地圖可以在 Sass 中循環,快速生成一系列規則集。
所有顏色
Bootstrap 4 中可用的所有顏色都可以作為 Sass 變量和scss/_variables.scss
文件中的 Sass 映射使用。這將在後續的次要版本中擴展以添加額外的陰影,就像我們已經包含的灰度調色板一樣。
以下是在 Sass 中使用這些的方法:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
顏色實用程序類也可用於設置color
和background-color
。
主題顏色
我們使用所有顏色的子集來創建一個較小的調色板來生成配色方案,也可以作為 Sass 變量和 Bootstrapscss/_variables.scss
文件中的 Sass 映射。
格雷斯
一組廣泛的灰色變量和一個 Sass 映射,scss/_variables.scss
用於在您的項目中實現一致的灰色陰影。請注意,這些是“冷灰色”,傾向於微妙的藍色調,而不是中性灰色。
在scss/_variables.scss
中,您會找到 Bootstrap 的顏色變量和 Sass 映射。$colors
這是Sass 映射的示例:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
在地圖中添加、刪除或修改值以更新它們在許多其他組件中的使用方式。不幸的是,目前並不是每個組件都使用這個 Sass 映射。未來的更新將努力改進這一點。在那之前,計劃使用${color}
變量和這個 Sass 映射。
成分
Bootstrap 的許多組件和實用程序都是用@each
遍歷 Sass 映射的循環構建的。這對於我們生成組件的$theme-colors
變體以及為每個斷點創建響應變體特別有用。當您自定義這些 Sass 映射並重新編譯時,您將自動看到您的更改反映在這些循環中。
修飾符
Bootstrap 的許多組件都是使用基本修飾符類方法構建的。這意味著大部分樣式都包含在基類中(例如,.btn
),而樣式變化僅限於修飾符類(例如,.btn-danger
)。這些修飾符類是從$theme-colors
地圖構建的,以自定義修飾符類的數量和名稱。
$theme-colors
以下是我們如何循環地圖以生成.alert
組件和所有.bg-*
後台實用程序的修飾符的兩個示例。
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}
響應式
這些 Sass 循環也不限於彩色地圖。您還可以生成組件或實用程序的響應式變體。以我們的響應式文本對齊實用程序為例,我們將Sass 映射的@each
循環與媒體查詢包括在內。$grid-breakpoints
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}
如果您需要修改$grid-breakpoints
,您的更改將應用於遍歷該地圖的所有循環。
CSS 變量
Bootstrap 4在其編譯的 CSS 中包含大約兩打CSS 自定義屬性(變量) 。在瀏覽器的檢查器、代碼沙箱或一般原型設計中工作時,這些提供了對常用值的輕鬆訪問,例如我們的主題顏色、斷點和主要字體堆棧。
可用變量
這是我們包含的變量(請注意,這:root
是必需的)。它們位於我們的_root.scss
文件中。
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
例子
CSS 變量提供了與 Sass 的變量類似的靈活性,但在提供給瀏覽器之前不需要編譯。例如,這裡我們使用 CSS 變量重置頁面的字體和鏈接樣式。
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
斷點變量
雖然我們最初在 CSS 變量中包含斷點(例如,--breakpoint-md
),但媒體查詢不支持這些斷點,但它們仍然可以在媒體查詢的規則集中使用。這些斷點變量保留在編譯後的 CSS 中以實現向後兼容性,因為它們可以被 JavaScript 使用。在規範中了解更多信息。
以下是不支持的示例:
@media (min-width: var(--breakpoint-sm)) {
...
}
以下是支持的示例:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}