主題化 Bootstrap

使用我們新的內建 Sass 變數自訂 Bootstrap 4，以取得全域樣式偏好設定，輕鬆進行主題化和元件變更。

簡介

在 Bootstrap 3 中，主題化主要是透過 LESS 中的變數覆寫、自訂 CSS 和我們包含在 dist 檔案中的獨立主題樣式表來驅動。只要花點功夫，就可以完全重新設計 Bootstrap 3 的外觀，而不用動到核心檔案。Bootstrap 4 提供了一個熟悉但略有不同的方法。

現在，主題化是透過 Sass 變數、Sass 對應和自訂 CSS 來完成。沒有更多專用的主題樣式表；相反地，您可以啟用內建主題以加入漸層、陰影等效果。

Sass

使用我們的 Sass 原始檔案，在使用自己的資源管道編譯 Sass 時，可以利用變數、對應、混合等功能。

檔案結構

盡可能避免修改 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 中開始修改任何 Sass 變數和對應。您也可以開始在 // Optional 區段中視需要新增 Bootstrap 的部分。我們建議使用我們的 bootstrap.scss 檔案中的完整匯入堆疊作為您的起點。

變數預設值

Bootstrap 中的每個 Sass 變數都包含 !default 旗標，讓您可以在自己的 Sass 中覆寫變數的預設值，而不用修改 Bootstrap 的原始程式碼。視需要複製並貼上變數，修改它們的值，並移除 !default 旗標。如果變數已經被指定，則它不會被 Bootstrap 中的預設值重新指定。

您會在 scss/_variables.scss 中找到 Bootstrap 變數的完整清單。有些變數設定為 null，這些變數不會輸出屬性，除非它們在您的組態中被覆寫。

變數覆寫必須在我們的函式、變數和混合後匯入，但在其他匯入之前。

以下是透過 npm 匯入並編譯 Bootstrap 時，變更 <body> 的 background-color 和 color 的範例

@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 中的任何變數，包括以下的全球選項。

使用我們的入門專案透過 npm 開始使用 Bootstrap！前往 twbs/bootstrap-npm-starter 範本存放庫，瞭解如何在自己的 npm 專案中建置並自訂 Bootstrap。包括 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 和 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 對應鍵正在使用的錯誤。

例如，我們使用 $theme-colors 中的 primary、success 和 danger 鍵，用於連結、按鈕和表單狀態。替換這些鍵的值應該不會出現問題，但移除它們可能會導致 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 中顏色的名稱（例如，primary 或 danger）和數字等級。

.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 和 subtract 函數來包裝 CSS calc 函數。這些函數的主要目的是在將「無單位」0 值傳遞到 calc 運算式時避免錯誤。calc(10px - 0) 等運算式會在所有瀏覽器中傳回錯誤，儘管在數學上是正確的。

calc 有效的範例

$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);
}

Sass 選項

使用我們的內建自訂變數檔案自訂 Bootstrap 4，並使用新的 $enable-* Sass 變數輕鬆切換全域 CSS 偏好設定。視需要覆寫變數值，並使用 npm run test 重新編譯。

您可以在 Bootstrap 的 scss/_variables.scss 檔案中找到並自訂這些用於主要全域選項的變數。

變數	值	說明
`$spacer`	`1rem`（預設值）或任何大於 0 的值	指定預設間隔值，以透過程式產生我們的間隔工具。
`$enable-rounded`	`true`（預設值）或 `false`	啟用各種元件上的預先定義 `border-radius` 樣式。
`$enable-shadows`	`true` 或 `false`（預設值）	啟用各種元件上的預先定義裝飾性 `box-shadow` 樣式。不會影響用於焦點狀態的 `box-shadow`。
`$enable-gradients`	`true` 或 `false`（預設值）	透過各種元件上的 `background-image` 樣式啟用預先定義的漸層。
`$enable-transitions`	`true`（預設值）或 `false`	啟用各種元件上的預先定義 `transition`。
`$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 地圖。這將在後續的次要版本中擴充，以新增其他色調，就像我們已經包含的灰階調色盤一樣。

$blue #007bff

$indigo #6610f2

$purple #6f42c1

$pink #e83e8c

$red #dc3545

$orange #fd7e14

$yellow #ffc107

$green #28a745

$teal #20c997

$cyan #17a2b8

以下是如何在 Sass 中使用這些變數

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

色彩工具類別也可設定 color 和 background-color。

未來，我們將提供 Sass 地圖和變數，提供每種顏色的色調，就像我們在下方灰階顏色中所做的那樣。

主題色彩

我們使用所有顏色的子集來建立一個較小的調色盤，以產生色彩配置，也可以在 Bootstrap 的 scss/_variables.scss 檔案中作為 Sass 變數和 Sass 地圖使用。

$primary #007bff

$secondary #6c757d

$success #28a745

$danger #dc3545

$warning #ffc107

$info #17a2b8

$light #f8f9fa

$dark #343a40

灰色

在 scss/_variables.scss 中有一組灰階變數和 Sass 地圖，可讓專案中的灰階色調保持一致。請注意，這些是「冷色調」，傾向於微妙的藍色調，而不是中性灰階。

$gray-100 #f8f9fa

$gray-200 #e9ecef

$gray-300 #dee2e6

$gray-400 #ced4da

$gray-500 #adb5bd

$gray-600 #6c757d

$gray-700 #495057

$gray-800 #343a40

$gray-900 #212529

在 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 迴圈也不限於色彩地圖。您也可以產生元件或工具程式的回應式變異。以我們的回應式文字對齊工具程式為例，我們將 $grid-breakpoints Sass 地圖的 @each 迴圈與媒體查詢包含混搭在一起。

@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 中包含約 24 個 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);
  }
}