Утилити АПИ
Услужни АПИ је алатка заснована на Сасс-у за генерисање услужних класа.
Боотстрап услужни програми се генеришу помоћу нашег услужног АПИ-ја и могу се користити за измену или проширење нашег подразумеваног скупа услужних класа преко Сасс-а. Наш услужни АПИ је заснован на серији Сасс мапа и функција за генерисање породица класа са различитим опцијама. Ако нисте упознати са Сасс мапама, прочитајте званичне Сасс документе да бисте започели.
Мапа $utilities
садржи све наше услужне програме и касније се спаја са вашом прилагођеном $utilities
мапом, ако постоји. Мапа услужних програма садржи кључну листу група услужних програма које прихватају следеће опције:
Опција | Тип | Задана вриједност | Опис |
---|---|---|---|
property |
Потребан | – | Име својства, ово може бити стринг или низ стрингова (нпр. хоризонтални допуни или маргине). |
values |
Потребан | – | Листа вредности или мапа ако не желите да име класе буде исто као и вредност. Ако null се користи као кључ мапе, не компајлира се. |
class |
Опционо | нула | Име генерисане класе. Ако није наведен и property представља низ стрингова, class подразумевано ће бити први елемент property низа. |
css-var |
Опционо | false |
Боолеан за генерисање ЦСС променљивих уместо ЦСС правила. |
local-vars |
Опционо | нула | Мапа локалних ЦСС променљивих за генерисање поред ЦСС правила. |
state |
Опционо | нула | Листа варијанти псеудокласа (нпр. :hover или :focus ) за генерисање. |
responsive |
Опционо | false |
Боолеан који показује да ли треба генерисати одговарајуће класе. |
rfs |
Опционо | false |
Боолеан за омогућавање течности поновног скалирања помоћу РФС-а . |
print |
Опционо | false |
Боолеан означава да ли треба генерисати класе за штампање. |
rtl |
Опционо | true |
Боолеан који показује да ли услужни програм треба да се задржи у РТЛ-у. |
АПИ објаснио
Све услужне променљиве се додају $utilities
променљивој унутар нашег _utilities.scss
стила. Свака група услужних програма изгледа отприлике овако:
$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; }
Имовина
Потребан property
кључ мора бити подешен за било који услужни програм и мора садржати важеће ЦСС својство. Ово својство се користи у скупу правила генерисаног услужног програма. Када је class
кључ изостављен, он такође служи као подразумевано име класе. Размотрите text-decoration
услужни програм:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Излаз:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Вредности
Користите values
кључ да одредите које вредности за наведени property
треба да се користе у генерисаним именима класа и правилима. Може бити листа или мапа (подешена у услужним програмима или у Сасс променљивој).
Као листа, као са text-decoration
услужним програмима :
values: none underline line-through
Као мапа, као са opacity
услужним програмима :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Као Сасс променљива која поставља листу или мапу, као у нашим position
услужним програмима :
values: $position-values
Класа
Користите class
опцију да промените префикс класе који се користи у преведеном ЦСС-у. На пример, да промените са .opacity-*
на .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Излаз:
.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }
ЦСС променљиви услужни програми
Поставите css-var
логичку опцију на true
и АПИ ће генерисати локалне ЦСС променљиве за дати селектор уместо уобичајених property: value
правила. Размотрите наше .text-opacity-*
комуналне услуге:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Излаз:
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
Локалне ЦСС променљиве
Користите local-vars
опцију да наведете Сасс мапу која ће генерисати локалне ЦСС променљиве унутар скупа правила услужне класе. Имајте на уму да ће можда бити потребан додатни рад да се те локалне ЦСС варијабле користе у генерисаним ЦСС правилима. На пример, размотрите наше .bg-*
услужне програме:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Излаз:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
државе
Користите state
опцију да генеришете варијације псеудо-класе. Примери псеудокласа су :hover
и :focus
. Када се обезбеди листа стања, имена класа се креирају за ту псеудо-класу. На пример, да бисте променили непрозирност при лебдењу, додајте state: hover
и ући ћете .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 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
Респонсиве
Додајте 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 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media (min-width: 576px) {
.opacity-sm-0 { opacity: 0 !important; }
.opacity-sm-25 { opacity: .25 !important; }
.opacity-sm-50 { opacity: .5 !important; }
.opacity-sm-75 { opacity: .75 !important; }
.opacity-sm-100 { opacity: 1 !important; }
}
@media (min-width: 768px) {
.opacity-md-0 { opacity: 0 !important; }
.opacity-md-25 { opacity: .25 !important; }
.opacity-md-50 { opacity: .5 !important; }
.opacity-md-75 { opacity: .75 !important; }
.opacity-md-100 { opacity: 1 !important; }
}
@media (min-width: 992px) {
.opacity-lg-0 { opacity: 0 !important; }
.opacity-lg-25 { opacity: .25 !important; }
.opacity-lg-50 { opacity: .5 !important; }
.opacity-lg-75 { opacity: .75 !important; }
.opacity-lg-100 { opacity: 1 !important; }
}
@media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0 !important; }
.opacity-xl-25 { opacity: .25 !important; }
.opacity-xl-50 { opacity: .5 !important; }
.opacity-xl-75 { opacity: .75 !important; }
.opacity-xl-100 { opacity: 1 !important; }
}
@media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0 !important; }
.opacity-xxl-25 { opacity: .25 !important; }
.opacity-xxl-50 { opacity: .5 !important; }
.opacity-xxl-75 { opacity: .75 !important; }
.opacity-xxl-100 { opacity: 1 !important; }
}
Принт
Омогућавање print
опције ће такође генерисати услужне класе за штампање, које се примењују само у оквиру @media print { ... }
упита за медије.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Излаз:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media print {
.opacity-print-0 { opacity: 0 !important; }
.opacity-print-25 { opacity: .25 !important; }
.opacity-print-50 { opacity: .5 !important; }
.opacity-print-75 { opacity: .75 !important; }
.opacity-print-100 { opacity: 1 !important; }
}
Значај
Сви услужни програми које генерише АПИ укључују !important
како би се осигурало да они замењују компоненте и класе модификатора како је предвиђено. Ову поставку можете да промените глобално помоћу $enable-important-utilities
променљиве (подразумевано на true
).
Коришћење АПИ-ја
Сада када сте упознати са начином на који АПИ услужних програма функционише, научите како да додате сопствене прилагођене класе и измените наше подразумеване услужне програме.
Заобиђите услужне програме
Заобиђите постојеће услужне програме користећи исти кључ. На пример, ако желите додатне одговарајуће класе услужних програма за преливање, можете да урадите ово:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Додајте услужне програме
Нови услужни програми се могу додати на подразумевану $utilities
мапу помоћу map-merge
. Уверите се да _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,
)
)
);
Измените услужне програме
Измените постојеће услужне програме у подразумеваној $utilities
мапи помоћу функција map-get
и map-merge
. У примеру испод, додајемо додатну вредност width
услужним програмима. Почните са иницијалом map-merge
, а затим одредите који услужни програм желите да измените. Одатле преузмите угнежђену "width"
мапу помоћу map-get
да бисте приступили и изменили опције и вредности услужног програма.
@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%),
),
),
),
)
);
Омогући одзив
Можете да омогућите прилагодљиве класе за постојећи скуп услужних програма који тренутно не одговарају подразумевано. На пример, да би border
класе биле прилагодљиве:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ),
),
)
);
Ово ће сада генерисати прилагодљиве варијације .border
и .border-0
за сваку тачку прекида. Ваш генерисани ЦСС ће изгледати овако:
.border { ... }
.border-0 { ... }
@media (min-width: 576px) {
.border-sm { ... }
.border-sm-0 { ... }
}
@media (min-width: 768px) {
.border-md { ... }
.border-md-0 { ... }
}
@media (min-width: 992px) {
.border-lg { ... }
.border-lg-0 { ... }
}
@media (min-width: 1200px) {
.border-xl { ... }
.border-xl-0 { ... }
}
@media (min-width: 1400px) {
.border-xxl { ... }
.border-xxl-0 { ... }
}
Преименујте услужне програме
Недостају в4 услужни програми или сте навикли на другу конвенцију именовања? АПИ за услужне програме може да се користи да се замени резултат class
датог услужног програма—на пример, да се преименују .ms-*
услужни програми у олдисх .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
опције на false
:
$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 */
Ово не даје ништа у РТЛ-у, захваљујући РТЛЦСС remove
контролној директиви .