Fa'aoga API
O le aoga API o se meafaigaluega fa'avae Sass e fa'atupu ai vasega aoga.
Bootstrap utilities o loʻo faʻatupuina i la matou aoga API ma e mafai ona faʻaoga e sui pe faʻalautele a matou seti le aoga o vasega aoga e ala i Sass. O la matou aoga API e faʻavae i luga o se faasologa o faʻafanua Sass ma galuega mo le fausiaina o aiga o vasega ma filifiliga eseese. Afai e te le masani i faafanua Sass, faitau i luga ole Sass pepa aloaia e amata ai.
O le $utilities
fa'afanua o lo'o iai uma a matou mea aoga ma mulimuli ane tu'ufa'atasia ma lau $utilities
fa'afanua masani, pe a iai. O le fa'afanua aoga o lo'o i ai se lisi autu o vaega fa'aoga e talia filifiliga nei:
Filifiliga | Ituaiga | Tau fa'aletonu | Fa'amatalaga |
---|---|---|---|
property |
Manaomia | – | Igoa o le meatotino, e mafai ona avea ma se manoa po'o se fa'asologa o manoa (fa'ata'ita'iga, fa'alava fa'alava po'o pito). |
values |
Manaomia | – | Lisi o tulaga faatauaina, po o se faafanua pe afai e te le manao ia tutusa le igoa o le vasega ma le tau. Afai null e fa'aaogaina e fai ma fa'afanua ki, e le'o tu'ufa'atasia. |
class |
Filifili | null | Igoa o le vasega faia. Afai e le tu'uina atu ma property o se fa'asologa o manoa, class o le a fa'aletonu i le elemene muamua o le property laina. |
css-var |
Filifili | false |
Boolean e fa'atupu ai suiga CSS nai lo tulafono CSS. |
local-vars |
Filifili | null | Fa'afanua o fesuiaiga CSS fa'apitonu'u e fa'aopoopo i tulafono CSS. |
state |
Filifili | null | Lisi o pseudo-vasega ese'ese (fa'ata'ita'iga, :hover po'o :focus ) e fa'atupuina. |
responsive |
Filifili | false |
Boolean o lo'o fa'ailoa mai ai pe tatau ona fa'atupu vasega tali. |
rfs |
Filifili | false |
Boolean e mafai ai ona toe faʻaleleia le suavai ile RFS . |
print |
Filifili | false |
Boolean o lo'o fa'ailoa mai ai pe mana'omia le fa'atupuina o vasega lolomi. |
rtl |
Filifili | true |
Boolean o lo'o fa'ailoa mai ai pe tatau ona teuina le aoga ile RTL. |
API faʻamatalaina
O fesuiaiga aoga uma e fa'aopoopo i le $utilities
fesuiaiga i totonu o la tatou _utilities.scss
sitaili. O vaega taʻitasi o faʻaoga e foliga mai e pei o lenei:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Le mea e maua ai mea nei:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Meatotino
O le property
ki manaʻomia e tatau ona seti mo soʻo se aoga, ma e tatau ona i ai se meatotino CSS aoga. O lenei meatotino o lo'o fa'aogaina i totonu o le tulafono a le fa'aaogaina. Pe a ave'esea le class
ki, e avea fo'i ma igoa ole vasega fa'aletonu. Mafaufau i le text-decoration
aoga:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Fuafuaga:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Tulaga taua
Fa'aaoga le values
ki e fa'amaoti ai po'o fea tau mo le fa'atonuga e property
tatau ona fa'aoga i igoa o vasega ma tulafono. E mafai ona avea ma lisi poʻo se faʻafanua (seti i totonu o mea aoga poʻo se fesuiaiga Sass).
E pei o se lisi, pei o text-decoration
mea aoga :
values: none underline line-through
E pei o se faafanua, pei o opacity
mea aoga :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
I le avea ai ma se fesuiaiga Sass e setiina le lisi poʻo le faʻafanua, pei oa tatou position
mea aoga :
values: $position-values
Vasega
Fa'aoga le class
filifiliga e sui ai le fa'auluuluga o le vasega o lo'o fa'aogaina ile CSS tu'ufa'atasia. Mo se fa'ata'ita'iga, sui mai .opacity-*
ile .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Fuafuaga:
.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 fa'aoga fesuia'i
Seti le css-var
filifiliga boolean true
ma o le API o le a fa'atupuina suiga CSS fa'apitonu'u mo le tagata filifilia nai lo property: value
tulafono masani. Mafaufau i a matou .text-opacity-*
mea faʻaoga:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Fuafuaga:
.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; }
Fa'alotoifale CSS fesuiaiga
Fa'aaoga le local-vars
filifiliga e fa'amaoti ai se fa'afanua Sass e fa'atupuina ai suiga CSS fa'apitonu'u i totonu o le tulafono a le vasega aoga. Fa'amolemole maitau e ono mana'omia se galuega fa'aopoopo e fa'aaoga ai na fesuiaiga CSS fa'apitonu'u i tulafono fa'atupu CSS. Mo se faʻataʻitaʻiga, mafaufau i a matou .bg-*
mea aoga:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Fuafuaga:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
Setete
Fa'aaogā le state
filifiliga e fa'atupu ai suiga fa'atusa. Faataitaiga pseudo-vasega o :hover
ma :focus
. A tu'uina atu se lisi o setete, e faia igoa o vasega mo lena pseudo-vasega. Mo se faʻataʻitaʻiga, e sui le opacity i luga o le faʻafefe, faʻaopoopo state: hover
ma e te maua .opacity-hover:hover
i lau CSS tuʻufaʻatasia.
Manaomia ni pseudo-vasega se tele? Fa'aaogā se lisi va'ava'ai o setete: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Fuafuaga:
.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; }
Talia
Fa'aopoopo le responsive
boolean e fa'atupu ai mea fa'aoga tali (fa'ata'ita'iga, .opacity-md-25
) i va'aiga uma .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Fuafuaga:
.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; }
}
Lolomi
O le fa'ataga o le print
filifiliga o le a fa'atupuina ai fo'i vasega aoga mo lolomi, lea e fa'aoga i totonu @media print { ... }
ole su'esu'ega fa'asalalau.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Fuafuaga:
.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; }
}
Taua
O mea aoga uma e gaosia e le API e aofia !important
ai le faʻamautinoa latou te faʻamalo vaega ma vasega faʻaleleia e pei ona faʻamoemoeina. E mafai ona e suiina lenei tulaga i le lalolagi atoa ma le $enable-important-utilities
fesuiaiga (faʻaletonu i true
).
Faʻaaogaina le API
O lea la ua e masani ile aoga ole API, a'oa'o pe fa'afefea ona fa'aopoopo a oe lava vasega fa'ale-aganu'u ma fa'aleleia a tatou mea fa'aoga le aoga.
Fa'asili mea aoga
Fa'asolo mea fa'aoga o lo'o iai ile fa'aogaina ole ki lava e tasi. Mo se faʻataʻitaʻiga, afai e te manaʻo i isi vasega faʻaoga faʻafefe, e mafai ona e faia lenei mea:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Fa'aopoopo mea fa'aoga
$utilities
E mafai ona fa'aopoopo mea faigaluega fou i le fa'afanua fa'aletonu ma se map-merge
. Ia mautinoa o matou faila Sass manaʻomia ma _utilities.scss
faʻaulufale muamua, ona faʻaoga lea map-merge
e faʻaopoopo ai au faʻaoga faʻaopoopo. Mo se faʻataʻitaʻiga, o le auala lenei e faʻaopoopoina ai se faʻaoga tali cursor
faʻatasi ma ni tau e tolu.
@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,
)
)
);
Suia mea aoga
$utilities
Suia mea aoga o lo'o i ai i le fa'afanua fa'aletonu map-get
ma map-merge
galuega. I le faʻataʻitaʻiga o loʻo i lalo, o loʻo matou faʻaopoopoina se tau faʻaopoopo i width
mea aoga. Amata i se amataga map-merge
ona fa'ailoa lea po'o fea aoga e te mana'o e sui. Mai i'ina, aumai le fa'aputuga "width"
fa'afanua map-get
e fa'aoga ma fa'alelei ai filifiliga ma fa'atauga a le aoga.
@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%),
),
),
),
)
);
Fa'agaoioi le tali atu
E mafai ona e fa'atagaina vasega tali mo se seti o mea aoga e le o tali mai i le taimi nei ona o le faaletonu. Mo se faʻataʻitaʻiga, ia faʻafeiloaʻi border
vasega:
@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 ),
),
)
);
Ole mea lea ole a fa'atupu ai suiga tali ole .border
ma .border-0
mo vaega ta'itasi. O lau CSS fa'atupuina o le a fa'apea:
.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 { ... }
}
Toe fa'aigoa mea faigaluega
O lo'o misi le v4 fa'aoga, pe fa'aaoga i se isi fa'aigoa igoa? E mafai ona fa'aogaina le API fa'aoga e fa'amalo ai le taunu'uga class
o se fa'aoga tu'ufa'atasi-mo se fa'ata'ita'iga, toe fa'aigoa .ms-*
mea aoga i le tuai .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 ),
),
)
);
Aveese mea faigaluega
Aveese so'o se mea fa'aoga fa'aletonu e ala i le setiina o le ki fa'alapotopotoga i le null
. Mo se faʻataʻitaʻiga, e aveese uma a matou width
mea aoga, fai se $utilities
map-merge
ma faʻaopoopo "width": null
i totonu.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Aveese le aoga ile RTL
O nisi mata'upu e fa'afaigata ai le faiga o le RTL , e pei o le motusia laina i le gagana Arapi. O le mea lea e mafai ai ona faʻaumatia mea aoga mai le RTL e ala i le setiina o le rtl
filifiliga i false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Fuafuaga:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
E leai se mea e maua i le RTL, faʻafetai i le RTLCSS remove
pule faʻatonuga .