API ya vukorhokeri
API ya vukorhokeri i xitirhisiwa lexi simekiweke eka Sass ku tumbuluxa titlilasi ta vukorhokeri.
Switirhisiwa swa Bootstrap swi endliwa hi API ya hina ya vukorhokeri naswona swi nga tirhisiwa ku cinca kumbe ku andlala sete ya hina ya ntolovelo ya titlilasi ta vukorhokeri hi ku tirhisa Sass. API ya hina ya vukorhokeri yi sekeriwe eka nxaxamelo wa mimepe ya Sass na mintirho yo tumbuluxa mindyangu ya titlilasi leti nga na swihlawulekisi swo hambana. Loko u nga tolovelanga mimepe ya Sass, hlaya ehenhla eka ti -doc ta ximfumo ta Sass ku sungula.
Mepe $utilities
wu na switirhisiwa swa hina hinkwaswo naswona endzhaku wu hlanganisiwa na $utilities
mepe wa wena wa ntolovelo, loko wu ri kona. Mepe wa switirhisiwa wu na nxaxamelo lowu nga na swilotlelo wa mintlawa ya switirhisiwa leswi amukelaka swihlawulekisi leswi landzelaka:
Ndlela | Muxaka | Nhlayo ya xiviri | Nhlamuselo |
---|---|---|---|
property |
Laveka | – . | Vito ra nhundzu, leswi swinga va ntambhu kumbe nxaxamelo wa tintambhu (xikombiso, ti horizontal paddings kumbe margins). |
values |
Laveka | – . | Nxaxamelo wa mimpimo, kumbe mepe loko u nga lavi leswaku vito ra tlilasi ri fana na ntikelo. Loko null yi tirhisiwa tanihi xilotlelo xa mepe, a yi hlengeletiwi. |
class |
Hlawula | hava | Vito ra tlilasi leyi tumbuluxiweke. Loko swi nga nyikiwanga naswona property ku ri nxaxamelo wa tintambhu, class wu ta default eka elemente yo sungula ya property nxaxamelo. |
css-var |
Hlawula | false |
Boolean ku tumbuluxa swilo leswi cinca-cincaka swa CSS ematshan’wini ya milawu ya CSS. |
local-vars |
Hlawula | hava | Mepe wa swilo leswi cinca-cincaka swa CSS swa laha kaya ku tumbuluxa ku engetela eka milawu ya CSS. |
state |
Hlawula | hava | Nxaxamelo wa swihlawulekisi swa tlilasi ya vuxisi (xikombiso, :hover kumbe :focus ) ku tumbuluxa. |
responsive |
Hlawula | false |
Boolean leyi kombisaka loko titlilasi leti hlamulaka ti fanele ku endliwa. |
rfs |
Hlawula | false |
Boolean ku endla leswaku ku va na ku ringanisiwa nakambe ka mati hi RFS . |
print |
Hlawula | false |
Boolean leyi kombisaka loko titlilasi to gandlisa ti lava ku endliwa. |
rtl |
Hlawula | true |
Boolean leyi kombisaka loko vukorhokeri byi fanele ku hlayisiwa eka RTL. |
API yi hlamuseriwile
Swilo hinkwaswo leswi cinca-cincaka swa vukorhokeri swi engeteriwa eka $utilities
xihlawulekisi endzeni ka _utilities.scss
xitayili xa hina. Ntlawa wun’wana ni wun’wana wa switirhisiwa wu languteka hi ndlela leyi:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Lexi humesaka leswi landzelaka:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Nhundzu
Xilotlelo lexi lavekaka property
xi fanele ku vekiwa eka vukorhokeri byihi na byihi, naswona xi fanele ku va na nhundzu ya CSS leyi tirhaka. Nhundzu leyi yi tirhisiwa eka sete ya milawu ya xitirhisiwa lexi endliweke. Loko class
xilotlelo xi tshikiwile, xi tlhela xi tirha tanihi vito ra tlilasi ya ntolovelo. Anakanya hi ndlela leyi text-decoration
pfunaka ha yona:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Vuyelo: .
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Mimpimanyeto
Tirhisa values
xilotlelo ku boxa leswaku hi yihi mimpimo ya leswi boxiweke leyi property
faneleke ku tirhisiwa eka mavito ya tlilasi leyi endliweke na milawu. Ku nga va nxaxamelo kumbe mepe (yi vekiwile eka switirhisiwa kumbe eka xihlawulekisi xa Sass).
Tanihi nxaxamelo, ku fana na text-decoration
switirhisiwa :
values: none underline line-through
Tanihi mepe, ku fana na opacity
switirhisiwa :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Tanihi xihlawulekisi xa Sass lexi vekaka nxaxamelo kumbe mepe, tanihi le ka position
switirhisiwa swa hina :
values: $position-values
Tlilasi
Tirhisa class
nhlawulo ku cinca xirhangi xa tlilasi lexi tirhisiweke eka CSS leyi hlengeletiweke. Xikombiso, ku cinca ku suka eka .opacity-*
ku ya eka .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Vuyelo: .
.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; }
Switirhisiwa swa CSS leswi cinca-cincaka
Seta css-var
nhlawulo wa boolean eka true
naswona API yi ta humesa swilo leswi cinca-cincaka swa CSS swa laha kaya swa xihlawulekisi lexi nyikiweke ematshan’wini ya property: value
milawu ya ntolovelo. Anakanya hi swilo leswi hi .text-opacity-*
swi tirhisaka:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Vuyelo: .
.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; }
Swilo leswi cinca-cincaka swa CSS swa laha kaya
Tirhisa local-vars
nhlawulo ku boxa mepe wa Sass lowu nga ta humesa swilo leswi cinca-cincaka swa CSS swa laha kaya endzeni ka sete ya milawu ya tlilasi ya vukorhokeri. Hi kombela u xiya leswaku swi nga ha lava ntirho wo engetela ku dya swilo sweswo leswi cinca-cincaka swa CSS swa laha kaya eka milawu ya CSS leyi endliweke. Hi xikombiso, xiya swilo leswi hi .bg-*
swi tirhisaka:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Vuyelo: .
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
Mimfumo
Tirhisa state
nhlawulo ku humesa ku hambana ka tlilasi ya vuxisi. Xikombiso xa titlilasi ta vuxisi i :hover
na :focus
. Loko nxaxamelo wa swiyimo wu nyikiwile, ku endliwa mavito ya titlilasi ya tlilasi yoleyo ya vuxisi. Xikombiso, ku cinca opacity eka hover, engetela state: hover
naswona u ta nghena .opacity-hover:hover
eka CSS ya wena leyi hlengeletiweke.
Xana u lava titlilasi to tala ta vuxisi? Tirhisa nxaxamelo wa swiyimo lowu hambanisiweke hi xivandla: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Vuyelo: .
.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; }
Ku hlamula
Engetela responsive
boolean ku tumbuluxa switirhisiwa leswi hlamulaka (xikombiso, .opacity-md-25
) ku tsemakanya tindhawu hinkwato to wisa .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Vuyelo: .
.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; }
}
Ku gandlisa
Ku pfumelela print
nhlawulo swi ta tlhela swi humesa titlilasi ta vukorhokeri byo gandlisa, leti tirhisiwaka ntsena endzeni ka @media print { ... }
xivutiso xa midiya.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Vuyelo: .
.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; }
}
Nkoka
Switirhisiwa hinkwaswo leswi endliweke hi API swi katsa !important
ku tiyisisa leswaku swi tlula swiphemu na titlilasi ta vacinci tanihilaha swi kunguhatiweke hakona. U nga cinca-cinca xiyimiso lexi emisaveni hinkwayo hi $enable-important-utilities
xihlawulekisi (xihlawulekisi eka true
).
Ku tirhisa API
Sweswi u toloveleke ndlela leyi API ya switirhisiwa yi tirhaka ha yona, dyondza ndlela yo engetela titlilasi ta wena ta ntolovelo ni ku cinca switirhisiwa swa hina swa ntolovelo.
Ku tlula switirhisiwa swa vukorhokeri
Tlula switirhisiwa leswi nga kona hi ku tirhisa xilotlelo lexi fanaka. Xikombiso, loko u lava titlilasi to engetela ta vukorhokeri bya ku tala loku hlamulaka, u nga endla leswi:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Engetela switirhisiwa swa vukorhokeri
Switirhisiwa leswintshwa swi nga engeteriwa eka $utilities
mepe wa ntolovelo hi map-merge
. Tiyisisa leswaku tifayela ta hina ta Sass leti lavekaka naswona _utilities.scss
ti nghenisiwa ku sungula, kutani u tirhisa map-merge
ku engetela switirhisiwa swa wena swo engetela. Xikombiso, hi leyi ndlela yo engetela xitirhisiwa xo hlamula lexi cursor
nga na mimpimo yinharhu.
@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,
)
)
);
Cinca switirhisiwa swa vukorhokeri
Cinca switirhisiwa leswi nga kona eka $utilities
mepe wa ntolovelo hi map-get
na map-merge
mintirho. Eka xikombiso lexi nga laha hansi, hi engetela ntikelo wo engetela eka width
switirhisiwa. Sungula hi masungulo map-merge
ivi u boxa leswaku u lava ku cinca xitirhisiwa xihi. "width"
Ku suka kwalaho, teka mepe lowu pfanganisiweke hi map-get
ku fikelela ni ku cinca swihlawulekisi ni mimpimo ya xitirhisiwa.
@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%),
),
),
),
)
);
Endla leswaku ku va ni ku hlamula
U nga endla leswaku titlilasi leti hlamulaka ti tirha eka sete leyi nga kona ya switirhisiwa leswi nga hlamuriki sweswi hi ku tiyimisela. Hi xikombiso, ku endla leswaku border
titlilasi ti hlamula:
@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 ),
),
)
);
Leswi sweswi swi ta humesa ku hambana loku hlamulaka ka .border
na .border-0
eka breakpoint yin’wana na yin’wana. CSS ya wena leyi endliweke yi ta languteka hi ndlela leyi:
.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 { ... }
}
Tlhela u thya mavito ya switirhisiwa
Switirhisiwa swa v4 leswi kayivelaka, kumbe swi toloverile ntwanano wun’wana wo thya mavito? API ya switirhisiwa yi nga tirhisiwa ku tlula mbuyelo class
wa xitirhisiwa lexi nyikiweke—xikombiso, ku thya .ms-*
switirhisiwa mavito mavito ya khale .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 ),
),
)
);
Susa switirhisiwa swa vukorhokeri
Susa xin’wana ni xin’wana xa switirhisiwa swa ntolovelo hi ku veka xilotlelo xa ntlawa eka null
. Hi xikombiso, ku susa width
switirhisiwa swa hina hinkwaswo, endla a $utilities
map-merge
ivi u engetela "width": null
endzeni.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Susa vukorhokeri eka RTL
Timhaka tin’wana ta le tlhelo ti endla leswaku ku endla switayele swa RTL swi tika , swo tanihi ku tshoveka ka milayeni hi Xiarabu. Xisweswo switirhisiwa swi nga susiwa eka vuhumelerisi bya RTL hi ku veka rtl
nhlawulo eka false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Vuyelo: .
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Leswi a swi humesi nchumu eka RTL, hikwalaho ka xileriso xa vulawuri xa RTLCSSremove
.