通用类别API

通用类别API是基于Sass工具所产生的通用类。

On this page

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中它不会输出任何内容。