通用類別API
通用類別API是基于Sass工具所產(chǎn)生的通用類。
Bootstrap實(shí)用類是用我們的實(shí)用程序API生成的，可以通過(guò)Sass修改或擴(kuò)展我們的默認(rèn)實(shí)用程序類集。我們的實(shí)用API基于一系列Sass映射和函數(shù)，用于生成具有各種選項(xiàng)的類族。如果您不熟悉Sass地圖，請(qǐng)閱讀Sass官方文檔開(kāi)始使用。
$utilities映射包含我們的所有實(shí)用程序，稍后將與您的自定義$utilities映射（如果存在）合并。實(shí)用程序映射包含接受以下選項(xiàng)的實(shí)用程序組的鍵控列表：
| 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
所有的通用類別變數(shù)都加在我們的 _utilities.scss樣式表的$utilities變數(shù)之中。每組通用類別如下所示：
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
輸出以下內(nèi)容：
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
自定義類前綴
使用class選項(xiàng)更改已編譯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; }
狀態(tài)
使用state選項(xiàng)來(lái)生成虛擬類別。例如虛擬類別的：hover和：focus。提供狀態(tài)列表后，將為虛擬類別創(chuàng)建類名。例如，要更改hover時(shí)的透明度，請(qǐng)?zhí)砑觭tate: hover，您將在編譯后的CSS中得到.opacity-hover:hover。
需要多個(gè)虛擬類別嗎？使用以空格分隔的狀態(tài)列表：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; }
響應(yīng)類
添加responsive布爾值以生成橫跨所有斷點(diǎn)的響應(yīng)式通用類別（例如，.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; }
}
更改通用類
透過(guò)使用相同的鍵值來(lái)覆蓋現(xiàn)有的通用類別。例如，您需要加入響應(yīng)式overflow通用類別的話，你可以這樣做：
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
打印實(shí)用類
啟用print選項(xiàng)將會(huì)同時(shí)為print生成通用類別，并僅能應(yīng)用在@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
既然您已經(jīng)熟悉了通用類別API的運(yùn)作原理，了解如何加入自己的自定義類別并修改我們預(yù)設(shè)的通用類別。
加入通用類
可以透過(guò)map-merge將新的通用類別加入到預(yù)設(shè)的$utilities map。首先確定有導(dǎo)入您的_utilities.scss，然后使用map-merge加入其他的通用類別。例如，以下是如何透過(guò)三個(gè)值加入一個(gè)響應(yīng)式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中預(yù)設(shè)的通用類別。在下面的示例中，我們?cè)谕ㄓ妙悇ewidth加入了一個(gè)附加值。從建立一個(gè)初始的map-merge開(kāi)始，然后指定要修改的通用類別。在那里使用map-get fetch一個(gè)嵌套的width map，以訪問(wèn)和修改通用類別的選項(xiàng)和值。
@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實(shí)用程序，或用于其他命名約定？實(shí)用程序API可以用于覆蓋給定實(shí)用程序的結(jié)果類，例如，將.ms-*實(shí)用程序重命名為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 ),
),
)
);
移除通用類
透過(guò)將群組鍵值設(shè)置為null以刪除任何預(yù)設(shè)的通用類別。舉例來(lái)說(shuō)，如果要?jiǎng)h除我們所有的width通用類別，請(qǐng)創(chuàng)建$utilities map-merge并在其中添加“width”：null。
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
在RTL中刪除通用類
某些情況會(huì)導(dǎo)致RTL難以設(shè)置樣式，例如阿拉伯語(yǔ)系的換行符號(hào)。因此，通過(guò)將rtl選項(xiàng)設(shè)置為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中它不會(huì)輸出任何內(nèi)容。