I-Utility API
I-Utility API iyithuluzi elisekelwe kwa-Sass lokukhiqiza amakilasi osizo.
Izinsiza ze-Bootstrap zenziwa nge-API yethu yokusetshenziswa futhi zingasetshenziselwa ukuguqula noma ukunweba isethi yethu ezenzakalelayo yamakilasi okusetshenziswayo nge-Sass. I-API yethu yokusetshenziswa isekelwe ochungechungeni lwamamephu we-Sass nemisebenzi yokukhiqiza imindeni yamakilasi ngezinketho ezihlukahlukene. Uma ungawazi amamephu akwa-Sass, funda kumadokhumenti e- Sass asemthethweni ukuze uqalise.
Imephu $utilities
iqukethe zonke izinsiza zethu futhi kamuva ihlanganiswa $utilities
nemephu yakho yangokwezifiso, uma ikhona. Imephu yokusetshenziswa iqukethe uhlu olunokhiye lwamaqembu asetshenziswayo amukela izinketho ezilandelayo:
Inketho | Uhlobo | Incazelo |
---|---|---|
property |
Kudingeka | Igama lesakhiwo, lokhu kungaba iyunithi yezinhlamvu noma uchungechunge lwezintambo (isb., amaphedi avundlile noma amamajini). |
values |
Kudingeka | Uhlu lwamanani, noma imephu uma ungafuni ukuthi igama lekilasi lifane nevelu. Uma null isetshenziswa njengokhiye wemephu, ayihlanganiswa. |
class |
Ongakukhetha | Okuguquguqukayo kwegama lekilasi uma ungafuni ukuthi lifane nesakhiwo. Uma kwenzeka unganikezi class ukhiye futhi property ukhiye kuwuchungechunge lwezintambo, igama lekilasi lizoba into yokuqala yamalungu property afanayo. |
state |
Ongakukhetha | Uhlu lwezinhlobonhlobo zesigaba-mbumbulu ezifana :hover noma :focus ezizokhiqizwa insiza. Alikho inani elizenzakalelayo. |
responsive |
Ongakukhetha | I-Boolean ekhombisa uma amakilasi asabelayo adinga ukwenziwa. false ngephutha. |
rfs |
Ongakukhetha | I-boolean ukuze unike amandla ukuncishiswa koketshezi. Bheka ikhasi le- RFS ukuze uthole ukuthi lokhu kusebenza kanjani. false ngephutha. |
print |
Ongakukhetha | I-Boolean ekhombisa uma amakilasi okuphrinta adinga ukwenziwa. false ngephutha. |
rtl |
Ongakukhetha | I-Boolean ekhombisa ukuthi ukusetshenziswa kufanele kugcinwe ku-RTL. true ngephutha. |
I-API yachaza
Zonke izinto eziguquguqukayo zengezwa $utilities
kokuguquguqukayo ngaphakathi kweshidi lethu _utilities.scss
lesitayela. Iqembu ngalinye lezinsiza libukeka kanje:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Okukhipha okulandelayo:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Isiqalo sekilasi langokwezifiso
Sebenzisa class
inketho ukuze uguqule isiqalo sekilasi esisetshenziswe ku-CSS ehlanganisiwe:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Okukhiphayo:
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
Amazwe
Sebenzisa state
inketho ukuze ukhiqize ukuhluka kwesigaba-mbumbulu. Izibonelo zamakilasi mbumbulu yilezi :hover
kanye :focus
. Uma uhlu lwezifunda lunikezwa, amagama ekilasi adalelwa leso sigaba-mbumbulu. Isibonelo, ukuze uguqule ukukhanya ku-hambisa phezulu, engeza state: hover
futhi uzongena .opacity-hover:hover
ku-CSS yakho ehlanganisiwe.
Udinga amakilasi-mbumbulu amaningi? Sebenzisa uhlu lwezifundazwe oluhlukaniswe isikhala: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Okukhiphayo:
.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; }
Izinsiza ezisabelayo
Engeza i- responsive
boolean ukuze ukhiqize izinsiza ezisabelayo (isb, .opacity-md-25
) kuwo wonke ama-breakpoint .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Okukhiphayo:
.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; }
}
Ukushintsha izinsiza
Khipha izinsiza ezikhona ngokusebenzisa ukhiye ofanayo. Isibonelo, uma ufuna amakilasi ezinsiza ezengeziwe eziphendulayo, ungenza lokhu:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Phrinta izinsiza
Ukunika amandla print
inketho kuzophinda kukhiqize amakilasi ezinsiza zokuphrinta, asetshenziswa kuphela ngaphakathi @media print { ... }
kombuzo wemidiya.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Okukhiphayo:
.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; }
}
Ukubaluleka
Zonke izinsiza ezikhiqizwe i-API zifaka phakathi !important
ukuqinisekisa ukuthi zibhala ngaphezulu izingxenye namakilasi okulungisa njengoba kuhlosiwe. Ungakwazi ukuguqula lesi silungiselelo emhlabeni jikelele ngokushintshashintsha $enable-important-utilities
(okuzenzakalelayo kuye kokuthi true
).
Ukusebenzisa i-API
Manje njengoba usuyazi ukuthi i-API yezinsiza isebenza kanjani, funda ukuthi ungangeza kanjani amakilasi akho angokwezifiso futhi ulungise izinsiza zethu ezizenzakalelayo.
Engeza izinsiza
Izinsiza ezintsha zingangezwa $utilities
kumephu ezenzakalelayo nge- map-merge
. Qiniseka ukuthi amafayela ethu adingekayo akwa-Sass futhi _utilities.scss
angeniswa kuqala, bese usebenzisa map-merge
ukungeza izinsiza zakho ezengeziwe. Isibonelo, nansi indlela yokwengeza cursor
insiza ephendulayo enamanani amathathu.
@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,
)
)
);
Shintsha izinsiza
Lungisa izinsiza ezikhona $utilities
kumephu ezenzakalelayo map-get
kanye map-merge
nemisebenzi. Esibonelweni esingezansi, sengeza inani elingeziwe width
kuzinsiza. Qala nge-initial map-merge
bese usho ukuthi iyiphi insiza ofuna ukuyishintsha. Kusuka lapho, landa "width"
imephu ebekwe esidlekeni map-get
ukuze ufinyelele futhi ulungise izinketho namanani ensiza.
@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%),
),
),
),
)
);
Nika amandla ukuphendula
Unganika amandla amakilasi asabelayo kusethi ekhona yezinsiza okwamanje ezingasabeli ngokuzenzakalela. Isibonelo, ukwenza border
amakilasi aphendule:
@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 ),
),
)
);
Lokhu manje kuzodala ukuhlukahluka okusabelayo kwephuzu .border
ngalinye .border-0
lokuhlukana. I-CSS yakho ekhiqiziwe izobukeka kanje:
.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 { ... }
}
Qamba kabusha izinsiza
Izinsiza ze-v4 ezingekho, noma ezijwayele ukuqamba amagama? Izinsiza ze-API zingasetshenziselwa ukubhala ngaphezulu umphumela class
wokusetshenziswa okunikeziwe—ngokwesibonelo, ukuqamba kabusha .ms-*
izinsiza ziye ku-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 ),
),
)
);
Susa izinsiza
Susa noma yiziphi izinsiza ezizenzakalelayo ngokusetha ukhiye weqembu ku- null
. Isibonelo, ukususa zonke width
izinsiza zethu, dala $utilities
map-merge
futhi wengeze "width": null
ngaphakathi.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Susa isisetshenziswa ku-RTL
Amanye amakesi onqenqema enza isitayela se-RTL sibe nzima , njengokunqamuka kwemigqa ngesi-Arabhu. Ngakho izinsiza zingehliswa ekuphumeni kwe-RTL ngokusetha rtl
inketho kokuthi false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Okukhiphayo:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Lokhu akukhiphi lutho ku-RTL, ngenxa yomyalelo wokulawula we-RTLCSSremove
.