主題引導

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

介紹

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

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

薩斯

利用我們的 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

@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。

同一個 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`
}

薩斯選項

使用我們內置的自定義變量文件自定義 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-hover-media-query`	`true`或`false`（默認）	已棄用
`$enable-grid-classes`	`true`（默認）或`false`	允許為網格系統生成 CSS 類（例如、、`.container`等）。`.row.col-md-1`
`$enable-caret`	`true`（默認）或`false`	在上啟用偽元素插入符號`.dropdown-toggle`。
`$enable-print-styles`	`true`（默認）或`false`	啟用樣式以優化打印。

顏色

許多 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 變量和 Bootstrapsscss/_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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}