?
This document uses PHP Chinese website manual Release
自定義引導(dǎo)4與我們的新內(nèi)置Sass變量，為全球風(fēng)格的首選項，以便于主題和組件的變化。
導(dǎo)言
在Bootstrap 3中，主題化很大程度上是由更少的、自定義的css中的變量重寫驅(qū)動的，以及我們在我們的dist檔案。通過一些努力，我們可以完全重新設(shè)計Bootstrap 3的外觀，而無需觸及核心文件。引導(dǎo)4提供了一種熟悉但略有不同的方法。
現(xiàn)在，主題化由Sass變量、Sass映射和自定義CSS完成。不再有專門的主題樣式表；相反，您可以啟用內(nèi)置主題來添加漸變、陰影等。
沙斯
利用我們的源代碼Sass文件來利用變量、映射、混合體等等。
文件結(jié)構(gòu)
盡可能避免修改Bootstrap的核心文件。對于Sass來說，這意味著創(chuàng)建您自己的樣式表來導(dǎo)入引導(dǎo)程序，以便您可以修改和擴(kuò)展它。假設(shè)您已經(jīng)下載了源文件或正在使用包管理器，那么您的文件結(jié)構(gòu)如下所示：
your-project/├── scss │ └── custom.scss └── node_modules/ └── bootstrap ├── js └── scss
在你的custom.scss，您將導(dǎo)入Bootstrap的源Sass文件。你有兩個選擇：包括所有的引導(dǎo)，或選擇你需要的部分。我們鼓勵后者，但要注意，組件之間存在一些需求和依賴關(guān)系。您還需要為我們的插件添加一些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";
設(shè)置就緒后，您可以開始修改custom.scss.還可以開始在// Optional根據(jù)需要分部門。
變量默認(rèn)值
引導(dǎo)程序4中的每個Sass變量包括!default標(biāo)志允許您在自己的Sass中重寫變量的默認(rèn)值，而無需修改Bootstrap的源代碼。根據(jù)需要復(fù)制和粘貼變量，修改它們的值，并刪除!default旗子。如果一個變量已經(jīng)被賦值，那么它將不會被重新賦值的默認(rèn)值在引導(dǎo)。
變量可以在默認(rèn)變量之前或之后重寫同一Sass文件。但是，在重寫Sass文件時，您的重寫必須在導(dǎo)入引導(dǎo)程序的Sass文件之前進(jìn)行。
下面是一個更改background-color和color為<body>在通過國家預(yù)防機(jī)制導(dǎo)入和編譯Bootstrap時：
// Your variable overrides$body-bg: #000;$body-color: #111;// Bootstrap and its default variables@import "node_modules/bootstrap/scss/bootstrap";
根據(jù)需要，對Bootstrap中的任何變量重復(fù)，包括下面的全局選項。
映射和循環(huán)
引導(dǎo)4包含了少量的Sass映射，鍵值對使得生成相關(guān)CSS的家族變得更容易。我們使用Sass地圖作為我們的顏色，網(wǎng)格斷點，等等。就像Sass變量一樣，所有Sass映射都包括!default標(biāo)志，可以重寫和擴(kuò)展。
例如，要修改$theme-colors映射，將以下內(nèi)容添加到您的自定義Sass文件中：
$theme-colors: ( "primary": #0074d9, "danger": #ff4136);
若要將新顏色添加到$theme-colors，添加新的鍵和值：
$theme-colors: ( "custom-color": #900);
功能
引導(dǎo)程序使用了幾個Sass函數(shù)，但只有一個子集適用于一般主題化。我們包含了三個從顏色地圖中獲取值的函數(shù)：
@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地圖。負(fù)的等級值會使顏色變淺，而較高的值則會變暗。
@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);}實際上，您可以調(diào)用該函數(shù)并傳入兩個參數(shù)：$theme-colors%28E.。g.，主要或危險%29和數(shù)字級別。
.custom-element {
color: theme-color-level(primary, -10);}將來還可以添加其他函數(shù)，或者添加您自己的自定義Sass，以便為其他Sass映射創(chuàng)建級別函數(shù)，如果您想要更詳細(xì)，甚至可以添加一個通用函數(shù)。
色彩對比
我們在Bootstrap中包含的一個附加功能是顏色對比功能，color-yiq.它利用YIQ顏色空間自動返回光%28#fff%29或黑暗%28#111%29基于指定基色的對比度顏色。此函數(shù)對于生成多個類的混和或循環(huán)特別有用。
例如，要從我們的$theme-colors地圖：
@each $color, $value in $theme-colors { .swatch-#{$color} {
color: color-yiq($value); }}它也可用于一次性對比需要：
.custom-element {
color: color-yiq(#000); // returns `color: #fff`}還可以使用顏色映射函數(shù)指定基色：
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`}SASS選項
使用內(nèi)置的自定義變量文件自定義引導(dǎo)程序4，并輕松切換新的全局css首選項。$enable-*一些變量。重寫變量的值并用npm run test視需要而定。
您可以在_variables.scss檔案。
Variable | Values | Description |
|---|---|---|
$spacer | 1rem (default), or any value > 0 | Specifies the default spacer value to programmatically generate our spacer utilities. |
$enable-rounded | true (default) or false | Enables predefined border-radius styles on various components. |
$enable-shadows | true or false (default) | Enables predefined box-shadow styles on various components. |
$enable-gradients | true or false (default) | Enables predefined gradients via background-image styles on various components. |
$enable-transitions | true (default) or false | Enables predefined transitions on various components. |
$enable-hover-media-query | true or false (default) | … |
$enable-grid-classes | true (default) or false | Enables the generation of CSS classes for the grid system (e.g., .container, .row, .col-md-1, etc.). |
$enable-caret | true (default) or false | Enables pseudo element caret on .dropdown-toggle. |
$enable-print-styles | true (default) or false | Enables styles for optimizing printing. |
顏色
Bootstrap的許多組件和實用程序都是通過Sass映射中定義的一系列顏色構(gòu)建的。這個映射可以在Sass中循環(huán)以快速生成一系列規(guī)則集。
所有顏色
Bootstrap 4中提供的所有顏色都可以作為Sass變量和我們的Sass映射提供。scss/_variables.scss檔案。這將在隨后的小版本中擴(kuò)展，以添加更多的陰影，類似于灰度調(diào)色板我們已經(jīng)包括了。
藍(lán)色
靛藍(lán)
紫
粉紅
紅
橙色
黃
綠
提爾
青色
下面是如何在Sass中使用這些內(nèi)容：
// With variable.alpha { color: $purple; }// From the Sass map with our `color()` function.beta { color: color("purple"); }顏色工具類也可用于設(shè)置color和background-color。
在未來，我們的目標(biāo)是為每種顏色的陰影提供Sass地圖和變量，就像我們對下面的灰度顏色所做的那樣。
主題色彩
我們使用所有顏色的子集來創(chuàng)建一個較小的調(diào)色板，用于生成配色方案，也可以作為Sass變量和我們的Sass映射使用。scss/_variables.scss檔案。
初等
二次
成功
危險
警告
信息
輕光
黑暗
格雷斯
的灰色變量集和Sass映射scss/_variables.scss在整個項目中保持一致的灰色陰影。
100
200
300
400
500
600
700
800
900
內(nèi)_variables.scss，你會找到我們的顏色變量和Sass地圖。下面是一個例子$colorsSass地圖：
$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映射。今后的更新將努力改進(jìn)這一點。在此之前，計劃利用${color}變量和這個Sass地圖。
組件
Bootstrap的許多組件和實用程序都是用@each在Sass映射上迭代的循環(huán)。這對于我們生成組件的變體尤其有幫助。$theme-colors并為每個斷點創(chuàng)建響應(yīng)變量。當(dāng)您自定義這些Sass映射并重新編譯時，您將自動看到這些循環(huán)中反映的更改。
修飾符
許多Bootstrap組件都是使用基礎(chǔ)修飾符類的方法構(gòu)建的。這意味著大部分樣式都包含在基類中（例如.btn），而樣式變體僅限于修飾符類（例如，.btn-danger）。這些修飾符類是從$theme-colors地圖構(gòu)建的，以定制我們修飾符類的數(shù)量和名稱。
下面是我們?nèi)绾伪闅v$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);}響應(yīng)性
這些Sass循環(huán)也不限于彩色地圖。您還可以生成組件或?qū)嵱贸绦虻捻憫?yīng)變體。例如，我們的響應(yīng)性文本對齊實用程序?qū)?code>@each循環(huán)的$grid-breakpoints包含媒體查詢的Sass地圖。
@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，您的更改將應(yīng)用于遍歷該映射的所有循環(huán)。