通用類別API
通用類別API是基于Sass工具所產生的通用類。
Bootstrap實用類是用我們的實用程序API生成的，可以通過Sass修改或擴展我們的默認實用程序類集。我們的實用API基于一系列Sass映射和函數，用于生成具有各種選項的類族。如果您不熟悉Sass地圖，請閱讀Sass官方文檔開始使用。
$utilities映射包含我們的所有實用程序，稍后將與您的自定義$utilities映射（如果存在）合并。實用程序映射包含接受以下選項的實用程序組的鍵控列表：
| Option | Type | Description |
|---|---|---|
property |
Required | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
values |
Required | List of values, or a map if you don’t want the class name to be the same as the value. If null
is used as map key, it isn’t compiled. |
class |
Optional | Variable for the class name if you don’t want it to be the same as the property. In case you don’t provide
the class key and property key is an array of strings, the class name will be the
first element of the property array. |
state |
Optional | List of pseudo-class variants like :hover or :focus to generate for the utility.
No default value. |
responsive |
Optional | Boolean indicating if responsive classes need to be generated. false by default. |
rfs |
Optional | Boolean to enable fluid rescaling. Have a look at the RFS page
to find out how this works. false by default. |
print |
Optional | Boolean indicating if print classes need to be generated. false by default. |
rtl |
Optional | Boolean indicating if utility should be kept in RTL. true by default. |
API explained
所有的通用類別變數都加在我們的 _utilities.scss樣式表的$utilities變數之中。每組通用類別如下所示：
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
輸出以下內容：
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
自定義類前綴
使用class選項更改已編譯CSS中所使用的class前綴：
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Output:
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
狀態
使用state選項來生成虛擬類別。例如虛擬類別的：hover和：focus。提供狀態列表后，將為虛擬類別創建類名。例如，要更改hover時的透明度，請添加state: hover，您將在編譯后的CSS中得到.opacity-hover:hover。
需要多個虛擬類別嗎？使用以空格分隔的狀態列表：state: hover focus。
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
輸出：
.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }
響應類
添加responsive布爾值以生成橫跨所有斷點的響應式通用類別（例如，.opacity-md-25）。
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
輸出：
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
@media (min-width: 576px) {
.opacity-sm-0 { opacity: 0; }
.opacity-sm-25 { opacity: .25; }
.opacity-sm-50 { opacity: .5; }
.opacity-sm-75 { opacity: .75; }
.opacity-sm-100 { opacity: 1; }
}
@media (min-width: 768px) {
.opacity-md-0 { opacity: 0; }
.opacity-md-25 { opacity: .25; }
.opacity-md-50 { opacity: .5; }
.opacity-md-75 { opacity: .75; }
.opacity-md-100 { opacity: 1; }
}
@media (min-width: 992px) {
.opacity-lg-0 { opacity: 0; }
.opacity-lg-25 { opacity: .25; }
.opacity-lg-50 { opacity: .5; }
.opacity-lg-75 { opacity: .75; }
.opacity-lg-100 { opacity: 1; }
}
@media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0; }
.opacity-xl-25 { opacity: .25; }
.opacity-xl-50 { opacity: .5; }
.opacity-xl-75 { opacity: .75; }
.opacity-xl-100 { opacity: 1; }
}
@media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0; }
.opacity-xxl-25 { opacity: .25; }
.opacity-xxl-50 { opacity: .5; }
.opacity-xxl-75 { opacity: .75; }
.opacity-xxl-100 { opacity: 1; }
}
更改通用類
透過使用相同的鍵值來覆蓋現有的通用類別。例如，您需要加入響應式overflow通用類別的話，你可以這樣做：
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
打印實用類
啟用print選項將會同時為print生成通用類別，并僅能應用在@media print { ... }媒體查詢中。
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
輸出：
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
@media print {
.opacity-print-0 { opacity: 0; }
.opacity-print-25 { opacity: .25; }
.opacity-print-50 { opacity: .5; }
.opacity-print-75 { opacity: .75; }
.opacity-print-100 { opacity: 1; }
}
使用API
既然您已經熟悉了通用類別API的運作原理，了解如何加入自己的自定義類別并修改我們預設的通用類別。
加入通用類
可以透過map-merge將新的通用類別加入到預設的$utilities map。首先確定有導入您的_utilities.scss，然后使用map-merge加入其他的通用類別。例如，以下是如何透過三個值加入一個響應式cursor通用類別的方法：
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
修改通用類
使用map-get和map-merge函式修改$utilities map中預設的通用類別。在下面的示例中，我們在通用類別width加入了一個附加值。從建立一個初始的map-merge開始，然后指定要修改的通用類別。在那里使用map-get fetch一個嵌套的width map，以訪問和修改通用類別的選項和值。
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": map-merge(
map-get($utilities, "width"),
(
values: map-merge(
map-get(map-get($utilities, "width"), "values"),
(10: 10%),
),
),
),
)
);
重命名通用類
缺少v4實用程序，或用于其他命名約定？實用程序API可以用于覆蓋給定實用程序的結果類，例如，將.ms-*實用程序重命名為oldish.ml-*：
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"margin-start": map-merge(
map-get($utilities, "margin-start"),
( class: ml ),
),
)
);
移除通用類
透過將群組鍵值設置為null以刪除任何預設的通用類別。舉例來說，如果要刪除我們所有的width通用類別，請創建$utilities map-merge并在其中添加“width”：null。
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
在RTL中刪除通用類
某些情況會導致RTL難以設置樣式，例如阿拉伯語系的換行符號。因此，通過將rtl選項設置為false可以從RTL輸出中刪除通用類別：
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
輸出：
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
多虧了RTLCSS remove控制指令，。 在RTL中它不會輸出任何內容。