Утилиты начальной загрузки создаются с помощью служебного API, который можно использовать для изменения или расширения служебных классов Bootstrap. Если вы не знаете что такое карты Sass, то можете начать работу обратившись к официальной документации.
Карта $utilities
содержит все утилиты и позже объединяется с вашей пользовательской картой $utilities
, если она есть. Карта утилит содержит ключевой список групп утилит, которые принимают следующие параметры:
property
: Имя свойства, это может быть строка или массив строк (требуется, например, для горизонтальных отступов или полей).responsive
(необязательно): Логическое значение, указывающее, нужно ли создавать адаптивные классы. По умолчанию имеет значениеfalse
.rfs
(необязательно): Переменная для изменения меняющегося масштаба. Взгляните на страницу RFS, чтобы узнать, как это работает. По умолчанию имеет значениеfalse
.class
(необязательно): Переменная для изменения имени класса, если вы не хотите, чтобы оно совпадало со свойством. Если вы не предоставили ключclass
, а ключproperty
представляет собой массив строк, имя класса будет первым элементом массиваproperty
.values
: Это может быть список значений или карта, если вы не хотите, чтобы имя класса совпадало со значением. Если в качестве ключа карты используется значение null, оно не отображается.print
(необязательно): Логическое значение, указывающее, нужно ли создавать классы печати. По умолчанию имеет значениеfalse
.
Добавление утилит в служебный API
Все служебные переменные добавляются в переменную $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
можно изменить префикс класса:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Вывод:
.o-0 {
opacity: 0;
}
.o-25 {
opacity: .25;
}
.o-50 {
opacity: .5;
}
.o-75 {
opacity: .75;
}
.o-100 {
opacity: 1;
}
Адаптивные параметры
С помощью адаптивного responsive
варианта можно сгенерировать отзывчивые служебные классы:
$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;
}
}
Изменение параметров
Отмена существующих параметров возможна с помощью того же ключа. Например, если вам нужны более отзывчивые служебные классы переполнения, вы можете сделать это:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Параметры печати
Включение опции печати print
также создаст служебные классы для печати.
$utilities: (
"opacity": (
property: opacity,
class: o,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Вывод:
.o-0 {
opacity: 0;
}
.o-25 {
opacity: .25;
}
.o-50 {
opacity: .5;
}
.o-75 {
opacity: .75;
}
.o-100 {
opacity: 1;
}
@media print {
.o-print-0 {
opacity: 0;
}
.o-print-25 {
opacity: .25;
}
.o-print-50 {
opacity: .5;
}
.o-print-75 {
opacity: .75;
}
.o-print-100 {
opacity: 1;
}
}
Удаление параметров
Параметры также можно удалить, изменив ключ группы на null
:
$utilities: (
"float": null,
);