通用类别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中它不会输出任何内容

返回顶部