通用類別API

通用類別API是基于Sass工具所產(chǎn)生的通用類。

On this page

Bootstrap實(shí)用類是用我們的實(shí)用程序API生成的，可以通過Sass修改或擴(kuò)展我們的默認(rèn)實(shí)用程序類集。我們的實(shí)用API基于一系列Sass映射和函數(shù)，用于生成具有各種選項(xiàng)的類族。如果您不熟悉Sass地圖，請閱讀Sass官方文檔開始使用。

$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)來生成虛擬類別。例如虛擬類別的：hover和：focus。提供狀態(tài)列表后，將為虛擬類別創(chuàng)建類名。例如，要更改hover時(shí)的透明度，請?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; }
}

更改通用類

透過使用相同的鍵值來覆蓋現(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è)的通用類別。

加入通用類

可以透過map-merge將新的通用類別加入到預(yù)設(shè)的$utilities map。首先確定有導(dǎo)入您的_utilities.scss，然后使用map-merge加入其他的通用類別。例如，以下是如何透過三個(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è)的通用類別。在下面的示例中，我們在通用類別width加入了一個(gè)附加值。從建立一個(gè)初始的map-merge開始，然后指定要修改的通用類別。在那里使用map-get fetch一個(gè)嵌套的width map，以訪問和修改通用類別的選項(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 ),
),
)
);

移除通用類

透過將群組鍵值設(shè)置為null以刪除任何預(yù)設(shè)的通用類別。舉例來說，如果要?jiǎng)h除我們所有的width通用類別，請創(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è)置樣式，例如阿拉伯語系的換行符號(hào)。因此，通過將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)容。