主題引導

使用我們新的內置 Sass 變量自定義 Bootstrap 4，以實現全局樣式偏好，以便輕鬆進行主題化和組件更改。

介紹

在 Bootstrap 3 中，主題主要由 LESS 中的變量覆蓋、自定義 CSS 和我們包含在dist文件中的單獨主題樣式表驅動。通過一些努力，可以完全重新設計 Bootstrap 3 的外觀，而無需觸及核心文件。Bootstrap 4 提供了一種熟悉但略有不同的方法。

現在，主題化由 Sass 變量、Sass 映射和自定義 CSS 完成。不再有專門的主題樣式表；相反，您可以啟用內置主題來添加漸變、陰影等。

薩斯

利用我們的 Sass 源文件來利用變量、映射、mixin 等。在我們的構建中，我們將 Sass 舍入精度提高到 6（默認為 5），以防止瀏覽器舍入問題。

文件結構

盡可能避免修改 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

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@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 4 中的每個 Sass 變量都包含一個!default標誌，允許您在自己的 Sass 中覆蓋變量的默認值，而無需修改 Bootstrap 的源代碼。根據需要復制和粘貼變量，修改它們的值，然後刪除!default標誌。如果一個變量已經被賦值，那麼它不會被 Bootstrap 中的默認值重新賦值。

您將在中找到 Bootstrap 變量的完整列表scss/_variables.scss。一些變量設置為null，這些變量不會輸出屬性，除非它們在您的配置中被覆蓋。

同一個 Sass 文件中的變量覆蓋可以在默認變量之前或之後。但是，當跨 Sass 文件覆蓋時，您的覆蓋必須在導入 Bootstrap 的 Sass 文件之前進行。

這是一個在通過 npm 導入和編譯 Bootstrap 時更改background-colorandcolor的示例：<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

根據需要對 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 中正確呈現背景圖像。

加減函數

我們使用addandsubtract函數來包裝 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`樣式。
`$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`（默認）	設置為`true`在使用任何計劃在`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 映射和變量，就像我們對下面的灰度顏色所做的那樣。

主題顏色

我們使用所有顏色的子集來創建一個較小的調色板來生成配色方案，也可以作為 Sass 變量和 Bootstrapscss/_variables.scss文件中的 Sass 映射。

基本的

中學

成功

危險

警告

信息

光

黑暗的

格雷斯

一組廣泛的灰色變量和一個 Sass 映射，scss/_variables.scss用於在您的項目中實現一致的灰色陰影。請注意，這些是“冷灰色”，傾向於微妙的藍色調，而不是中性灰色。

100

200

300

400

500

600

700

800

900

在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", 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);
  }
}