API ya mohola
API ya utility ke sedirišwa seo se theilwego go Sass go tšweletša diklase tša utility.
Didirišwa tša Bootstrap di tšweletšwa ka API ya rena ya didirišwa gomme di ka šomišwa go fetoša goba go katološa sete ya rena ya go se fetoge ya diklase tša didirišwa ka Sass. API ya rena ya utility e theilwe godimo ga letoto la dimmapa tša Sass le mešomo ya go tšweletša malapa a diklase tšeo di nago le dikgetho tše di fapanego. Ge e ba o sa tlwaelana le dimmapa tša Sass, bala godimo go di- doc tša semmušo tša Sass go thoma.
Mmapa $utilities
o na le didirišwa tša rena ka moka gomme ka morago o kopanywa le $utilities
mmapa wa gago wa tlwaelo, ge e ba o le gona. Mmapa wa utility o na le lenaneo leo le nago le dinotlelo la dihlopha tša utility tšeo di amogelago dikgetho tše di latelago:
Kgetho | Mohuta | Boleng bja go se fetoge | Tlhalošo |
---|---|---|---|
property |
Nyakegago | – . | Leina la thepa, se e ka ba thapo goba lenaneo la dithapo (mohlala, dipadding tše di rapaletšego goba mapheko). |
values |
Nyakegago | – . | Lenaneo la boleng, goba mmapa ge o sa nyake gore leina la sehlopha le swane le boleng. Ge null e šomišwa bjalo ka senotlelo sa mmapa, ga e kgoboketšwe. |
class |
Boikgethelo | ya lefela | Leina la sehlopha seo se tšweleditšwego. Ge e sa fiwa ebile property ke lenaneo la dithapo, class tla default go elemente ya mathomo ya property lenaneo. |
css-var |
Boikgethelo | false |
Boolean go tšweletša diphetogo tša CSS go e na le melawana ya CSS. |
local-vars |
Boikgethelo | ya lefela | Mmapa wa diphetogo tša CSS tša selegae go tšweletša go tlaleletša go melawana ya CSS. |
state |
Boikgethelo | ya lefela | Lenaneo la diphetogo tša maemo a maaka (mohlala, :hover goba :focus ) go tšweletša. |
responsive |
Boikgethelo | false |
Boolean e laetša ge e ba diklase tše di arabelago di swanetše go tšweletšwa. |
rfs |
Boikgethelo | false |
Boolean go kgontšha go lekanyetša gape seela ka RFS . |
print |
Boikgethelo | false |
Boolean e laetša ge e ba diklase tša go phrintha di swanetše go tšweletšwa. |
rtl |
Boikgethelo | true |
Boolean e bontšha ge e ba utility e swanetše go bolokwa ka go RTL. |
API e hlalositše
Diphetogo ka moka tša mohola di tlaleletšwa go $utilities
phetogo ka gare ga letlakala la rena _utilities.scss
la setaele. Sehlopha se sengwe le se sengwe sa didirišwa se lebelela selo se sengwe se se swanago le se:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Eo e ntšhago tše di latelago:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Thoto
Senotlelo se se nyakegago property
se swanetše go bewa bakeng sa sedirišwa sefe goba sefe, gomme se swanetše go ba le thepa ya CSS ye e šomago. Thepa ye e šomišwa ka go sete ya melao ya utility ye e tšweleditšwego. Ge class
senotlelo se tlogetšwe, se šoma gape bjalo ka leina la sehlopha sa go se fetoge. Ela hloko text-decoration
mohola:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Ditšweletšwa: .
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Ditekanyetšo
Šomiša values
senotlelo go laetša gore ke dikelo dife tša tše di laeditšwego tšeo di property
swanetšego go šomišwa ka go maina a sehlopha tše di tšweleditšwego le melawana. E ka ba lenane kapa mmapa (beha ka utilities kapa ka Sass feto-fetohang).
E le lenane, joaloka le text-decoration
utilities :
values: none underline line-through
Bjalo ka mmapa, go swana le ka opacity
didirišwa :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Bjalo ka phetogo ya Sass yeo e beago lenaneo goba mmapa, bjalo ka ka go position
didirišwa tša rena :
values: $position-values
Phapoši
Šomiša class
kgetho go fetoša hlogo ya sehlopha ye e šomišitšwego ka go CSS ye e kgobokeditšwego. Mohlala, go fetola go tšwa .opacity-*
go go ya go .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Ditšweletšwa: .
.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; }
Didirišwa tša go fetoga tša CSS
Beakanya css-var
kgetho ya boolean go true
gomme API e tla tšweletša diphetogo tša CSS tša selegae tša mokgethi yo a filwego go e na le property: value
melawana ya tlwaelo. .text-opacity-*
Ela hloko didirišwa tša rena tša motheo:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Ditšweletšwa: .
.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; }
Diphetogo tša CSS tša selegae
Šomiša local-vars
kgetho go laetša mmapa wa Sass wo o tlago tšweletša diphetogo tša CSS tša selegae ka gare ga sete ya melawana ya sehlopha sa utility. Hle ela hloko gore go ka nyaka mošomo wa tlaleletšo go ja diphetogo tšeo tša selegae tša CSS ka melaong ya CSS ye e tšweleditšwego. Ka mohlala, ela hloko .bg-*
didirišwa tša rena tša motheo:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Ditšweletšwa: .
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
Dilete
Šomiša state
kgetho go tšweletša diphetogo tša maemo a maaka. Mohlala wa diklase tša maaka ke :hover
le :focus
. Ge lenaneo la dilete le fiwa, maina a diklase a hlolwa bakeng sa sehlopha seo sa maaka. Go fa mohlala, go fetoša opacity ka hover, oketša state: hover
gomme o tla hwetša .opacity-hover:hover
ka gare ga CSS ya gago ye e kgobokeditšwego.
O hloka dihlopha tše dintši tša maaka? Šomiša lenaneo la maemo leo le arotšwego ka sekgoba: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Ditšweletšwa: .
.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; }
Go arabela
Oketša responsive
boolean go tšweletša didirišwa tše di arabelago (mohlala, .opacity-md-25
) go ralala le dintlha ka moka tša go kgaotša .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Ditšweletšwa: .
.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; }
}
Phrintha
Go kgontšha print
kgetho go tla tšweletša gape diklase tša mohola tša go phrintha, tšeo di dirišwago fela ka gare ga @media print { ... }
potšišo ya boraditaba.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Ditšweletšwa: .
.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; }
}
Bohlokwa
Didirišwa ka moka tšeo di tšweleditšwego ke API di akaretša !important
go netefatša gore di tloša dikarolo le dihlopha tša sefetoši bjalo ka ge di reretšwe. O ka fetola peakanyo ye lefaseng ka bophara ka $enable-important-utilities
phetogo (defaults to true
).
Go diriša API
Bjale ka ge o tlwaelane le kamoo API ya didirišwa e šomago ka gona, ithute kamoo o ka oketšago diklase tša gago tša tlwaelo le go fetoša didirišwa tša rena tša go se fetoge.
Tloša didirišwa tša go thuša
Tloša didirišwa tše di lego gona ka go diriša senotlelo se se swanago. Go fa mohlala, ge o nyaka diklase tša tlaleletšo tša go tlala tša go arabela tša go tlala, o ka dira se:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Oketša didirišwa
Didirišwa tše mpsha di ka okeletšwa $utilities
mmapeng wa go se fetoge ka map-merge
. Netefatša gore difaele tša rena tša Sass tše di nyakegago gomme _utilities.scss
di tsenywa ka ntle pele, ke moka o šomiše map-merge
go oketša didirišwa tša gago tša tlaleletšo. Go fa mohlala, mo ke kamoo o ka oketšago cursor
utility ye e arabelago ka dikelo tše tharo.
@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,
)
)
);
Fetoša didirišwa
Fetoša didirišwa tše di lego gona ka $utilities
mmapeng wa go se fetoge ka map-get
le map-merge
mešomo. Mohlaleng wo o lego ka mo tlase, re tlaleletša ka boleng bja tlaleletšo go width
didirišwa. Thoma ka mathomo map-merge
gomme o laetše gore ke utility efe yeo o nyakago go e fetoša. Go tloga moo, lata "width"
mmapa wo o tsentšwego ka gare ga sehlaga ka map-get
go fihlelela le go fetoša dikgetho le dikelo tša utility.
@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%),
),
),
),
)
);
Kgontšha go arabela
O ka kgontšha diklase tše di arabelago bakeng sa sete ye e lego gona ya didirišwa tšeo ga bjale di sa arabelego ka go ikemela. Ka mohlala, go dira gore border
diklase di arabele:
@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 ),
),
)
);
Se bjale se tla tšweletša diphetogo tše di arabelago tša .border
le .border-0
bakeng sa ntlha ye nngwe le ye nngwe ya go kgaotša. CSS ya gago ye e tšweleditšwego e tla lebelega ka tsela ye:
.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 { ... }
}
Rena leina lefsa la didirišwa
Didirišwa tša v4 tše di sego gona, goba di tlwaetše kopano e nngwe ya go rea maina? API ya didirišwa e ka šomišwa go tloša sephetho class
sa sedirišwa se se filwego—mohlala, go reela .ms-*
didirišwa leina lefsa go ya kgale .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 ),
),
)
);
Tlosa didirišwa tša go thuša
Tloša efe goba efe ya didirišwa tša go se fetoge ka go beakanya senotlelo sa sehlopha go null
. Ka mohlala, go tloša width
didirišwa tša rena ka moka, hlama a $utilities
map-merge
gomme o oketše "width": null
ka gare.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Tlosa utility ka RTL
Ba bang ba bohale melato etsa RTL setaele thata , tse kang mola kgaotsa ka Searabia. Ka go realo didirišwa di ka lahlwa go tšwa go ditšweletšwa tša RTL ka go beakanya rtl
kgetho go false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Ditšweletšwa: .
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Se ga se tšweletše selo ka go RTL, ka lebaka la taelo ya taolo ya RTLCSSremove
.