Utility API
API i shërbimeve është një mjet i bazuar në Sass për të gjeneruar klasa të shërbimeve.
Shërbimet e bootstrap krijohen me API-në tonë të shërbimeve dhe mund të përdoren për të modifikuar ose zgjeruar grupin tonë të paracaktuar të klasave të shërbimeve nëpërmjet Sass. API-ja jonë e shërbimeve bazohet në një seri hartash dhe funksionesh Sass për gjenerimin e familjeve të klasave me opsione të ndryshme. Nëse nuk jeni të njohur me hartat Sass, lexoni dokumentet zyrtare të Sass për të filluar.
Harta $utilities
përmban të gjitha shërbimet tona dhe më vonë bashkohet me $utilities
hartën tuaj të personalizuar, nëse është e pranishme. Harta e shërbimeve përmban një listë të kyçur të grupeve të shërbimeve që pranojnë opsionet e mëposhtme:
Opsioni | Lloji | Vlera e paracaktuar | Përshkrim |
---|---|---|---|
property |
E detyrueshme | - | Emri i pronës, ky mund të jetë një varg ose një grup vargjesh (p.sh., mbushje horizontale ose margjina). |
values |
E detyrueshme | - | Lista e vlerave ose një hartë nëse nuk dëshironi që emri i klasës të jetë i njëjtë me vlerën. Nëse null përdoret si çelës harte, ai nuk është i përpiluar. |
class |
Fakultative | i pavlefshëm | Emri i klasës së krijuar. Nëse nuk ofrohet dhe property është një grup vargjesh, class do të jetë i paracaktuar në elementin e parë të property grupit. |
css-var |
Fakultative | false |
Boolean për të gjeneruar variabla CSS në vend të rregullave CSS. |
local-vars |
Fakultative | i pavlefshëm | Harta e variablave lokale CSS për të gjeneruar përveç rregullave të CSS. |
state |
Fakultative | i pavlefshëm | Lista e varianteve pseudo-klasë (p.sh., :hover ose :focus ) për të gjeneruar. |
responsive |
Fakultative | false |
Boolean që tregon nëse duhet të krijohen klasa të përgjegjshme. |
rfs |
Fakultative | false |
Boolean për të mundësuar rishkallëzimin e lëngjeve me RFS . |
print |
Fakultative | false |
Boolean që tregon nëse duhet të krijohen klasa printimi. |
rtl |
Fakultative | true |
Boolean që tregon nëse programi duhet të mbahet në RTL. |
API shpjegohet
Të gjitha variablat e shërbimeve i shtohen $utilities
variablit brenda fletës sonë të _utilities.scss
stilit. Çdo grup i shërbimeve duket diçka si kjo:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Që nxjerr sa vijon:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Prona
Çelësi i kërkuar property
duhet të vendoset për çdo mjet dhe duhet të përmbajë një veti të vlefshme CSS. Kjo veti përdoret në grupin e rregullave të programit të gjeneruar. Kur class
çelësi hiqet, ai shërben gjithashtu si emri i paracaktuar i klasës. Merrni parasysh text-decoration
dobinë:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Prodhimi:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
vlerat
Përdorni values
çelësin për të specifikuar se cilat vlera për të specifikuarit property
duhet të përdoren në emrat dhe rregullat e klasave të gjeneruara. Mund të jetë një listë ose hartë (e vendosur në shërbimet komunale ose në një variabël Sass).
Si një listë, si me text-decoration
shërbimet komunale :
values: none underline line-through
Si një hartë, si me opacity
shërbimet komunale :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Si një variabël Sass që përcakton listën ose hartën, si në position
shërbimet tona :
values: $position-values
Klasa
Përdorni class
opsionin për të ndryshuar prefiksin e klasës të përdorur në CSS të përpiluar. Për shembull, për të ndryshuar nga .opacity-*
në .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Prodhimi:
.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; }
Shërbimet e ndryshueshme CSS
Vendosni css-var
opsionin boolean në true
dhe API do të gjenerojë variabla lokale CSS për përzgjedhësin e dhënë në vend të property: value
rregullave të zakonshme. Konsideroni .text-opacity-*
shërbimet tona:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Prodhimi:
.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; }
Variablat lokale CSS
Përdorni local-vars
opsionin për të specifikuar një hartë Sass që do të gjenerojë variabla lokale CSS brenda grupit të rregullave të klasës së shërbimeve. Ju lutemi vini re se mund të kërkojë punë shtesë për të konsumuar ato variabla lokale CSS në rregullat e krijuara të CSS. Për shembull, merrni parasysh .bg-*
shërbimet tona:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Prodhimi:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
shtetet
Përdorni state
opsionin për të gjeneruar variacione pseudo-klasë. Shembull pseudo-klasa janë :hover
dhe :focus
. Kur ofrohet një listë e gjendjeve, krijohen emra klasash për atë pseudo-klasë. Për shembull, për të ndryshuar opacitetin në hover, shtoni state: hover
dhe do të .opacity-hover:hover
futeni në CSS-në tuaj të përpiluar.
Keni nevojë për pseudo-klasa të shumta? Përdorni një listë gjendjesh të ndarë me hapësirë: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Prodhimi:
.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; }
Të përgjegjshme
Shto responsive
boolean për të gjeneruar shërbime të përgjegjshme (p.sh., .opacity-md-25
) në të gjitha pikat e ndërprerjes .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Prodhimi:
.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; }
}
Printo
Aktivizimi i print
opsionit do të gjenerojë gjithashtu klasa të shërbimeve për printim, të cilat aplikohen vetëm brenda @media print { ... }
pyetjes së medias.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Prodhimi:
.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; }
}
rëndësi
Të gjitha shërbimet e gjeneruara nga API përfshijnë !important
për t'u siguruar që ato të anashkalojnë komponentët dhe klasat e modifikuesve siç synohet. Ju mund ta ndryshoni këtë cilësim globalisht me $enable-important-utilities
variablin (e parazgjedhur në true
).
Duke përdorur API
Tani që jeni njohur me mënyrën se si funksionon API i shërbimeve, mësoni se si të shtoni klasat tuaja të personalizuara dhe të modifikoni shërbimet tona të paracaktuara.
Anuloni shërbimet
Anuloni shërbimet ekzistuese duke përdorur të njëjtin çelës. Për shembull, nëse dëshironi klasa shtesë të shërbimeve të tejmbushjes së përgjegjshme, mund ta bëni këtë:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Shto shërbimet komunale
Shërbimet e reja mund të shtohen në $utilities
hartën e paracaktuar me një map-merge
. Sigurohuni që skedarët tanë të kërkuar Sass dhe _utilities.scss
të importohen fillimisht, më pas përdorni map-merge
për të shtuar shërbimet tuaja shtesë. Për shembull, ja se si të shtoni një mjet të përgjegjshëm cursor
me tre vlera.
@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,
)
)
);
Ndrysho shërbimet
Modifikoni shërbimet ekzistuese në $utilities
hartën e paracaktuar me map-get
dhe map-merge
funksionet. Në shembullin e mëposhtëm, ne po u shtojmë një vlerë shtesë width
shërbimeve. Filloni me një inicial map-merge
dhe më pas specifikoni cilin program dëshironi të modifikoni. Nga atje, merrni "width"
hartën e ndërlidhur me map-get
për të hyrë dhe modifikuar opsionet dhe vlerat e programit.
@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%),
),
),
),
)
);
Aktivizo responsive
Mund të aktivizoni klasa të përgjegjshme për një grup ekzistues shërbimesh që nuk janë aktualisht të përgjegjshme si parazgjedhje. Për shembull, për t'i bërë border
klasat të përgjegjshme:
@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 ),
),
)
);
Kjo tani do të gjenerojë variacione të përgjegjshme të .border
dhe .border-0
për çdo pikë ndërprerjeje. CSS-ja juaj e krijuar do të duket kështu:
.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 { ... }
}
Riemërtoni shërbimet
Mungojnë shërbimet v4, apo janë përdorur në një konventë tjetër emërtimi? Utilities API mund të përdoret për të anashkaluar rezultatin class
e një programi të caktuar - për shembull, për të riemërtuar .ms-*
shërbimet në 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 ),
),
)
);
Hiq shërbimet
Hiqni ndonjë nga shërbimet e paracaktuara duke vendosur tastin e grupit në null
. Për shembull, për të hequr të gjitha width
shërbimet tona, krijoni një $utilities
map-merge
dhe shtoni "width": null
brenda.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Hiq programin në RTL
Disa kuti të skajeve e bëjnë të vështirë stilimin e RTL , si p.sh. ndërprerjet e rreshtave në arabisht. Kështu, shërbimet mund të hiqen nga dalja RTL duke vendosur rtl
opsionin në false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Prodhimi:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Kjo nuk nxjerr asgjë në RTL, falë direktivës së kontrollit RTLCSSremove
.