Utility API
API ya matumizi ni zana ya msingi ya Sass ya kutengeneza madarasa ya matumizi.
Huduma za Bootstrap zinazalishwa na API yetu ya matumizi na zinaweza kutumika kurekebisha au kupanua seti yetu chaguomsingi ya madarasa ya matumizi kupitia Sass. API yetu ya matumizi inategemea mfululizo wa ramani na vipengele vya Sass vya kuzalisha familia za madarasa na chaguo mbalimbali. Ikiwa hujui ramani za Sass, soma kwenye hati rasmi za Sass ili kuanza.
Ramani $utilities
ina huduma zetu zote na baadaye itaunganishwa na $utilities
ramani yako maalum, ikiwa iko. Ramani ya matumizi ina orodha ya ufunguo ya vikundi vya matumizi ambavyo vinakubali chaguo zifuatazo:
Chaguo | Aina | Thamani chaguomsingi | Maelezo |
---|---|---|---|
property |
Inahitajika | - | Jina la sifa, hii inaweza kuwa mfuatano au safu ya mifuatano (kwa mfano, padi za mlalo au pambizo). |
values |
Inahitajika | - | Orodha ya thamani, au ramani ikiwa hutaki jina la darasa liwe sawa na thamani. Ikiwa null inatumika kama ufunguo wa ramani, haijaundwa. |
class |
Hiari | null | Jina la darasa lililoundwa. Ikiwa haijatolewa na property ni safu ya mifuatano, class itakuwa chaguomsingi kwa kipengele cha kwanza cha property safu. |
css-var |
Hiari | false |
Boolean kuzalisha vigeu vya CSS badala ya sheria za CSS. |
local-vars |
Hiari | null | Ramani ya vigeu vya ndani vya CSS vya kuzalisha pamoja na sheria za CSS. |
state |
Hiari | null | Orodha ya vibadala vya aina bandia (km, :hover au :focus ) vya kutengeneza. |
responsive |
Hiari | false |
Boolean ikionyesha ikiwa madarasa sikivu yanapaswa kuzalishwa. |
rfs |
Hiari | false |
Boolean kuwezesha uwekaji upya wa maji kwa RFS . |
print |
Hiari | false |
Boolean ikionyesha kama madarasa ya uchapishaji yanahitaji kuzalishwa. |
rtl |
Hiari | true |
Boolean ikionyesha ikiwa matumizi yanapaswa kuwekwa katika RTL. |
API ilieleza
Vigezo vyote vya matumizi huongezwa kwa $utilities
kutofautisha ndani ya laha zetu za _utilities.scss
mitindo. Kila kikundi cha huduma kinaonekana kama hii:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Ambayo hutoa matokeo yafuatayo:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Mali
Ufunguo unaohitajika property
lazima uwekwe kwa matumizi yoyote, na lazima uwe na sifa halali ya CSS. Mali hii hutumiwa katika kanuni za matumizi zinazozalishwa. Wakati class
ufunguo umeachwa, pia hutumika kama jina la darasa chaguo-msingi. Fikiria text-decoration
matumizi:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Pato:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Maadili
Tumia values
ufunguo kubainisha ni thamani zipi za zilizobainishwa property
zinafaa kutumika katika majina na kanuni za darasa zinazozalishwa. Inaweza kuwa orodha au ramani (iliyowekwa katika huduma au kwa kutofautisha kwa Sass).
Kama orodha, kama na text-decoration
huduma :
values: none underline line-through
Kama ramani, kama vile opacity
huduma :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Kama kigezo cha Sass ambacho huweka orodha au ramani, kama katika position
huduma zetu :
values: $position-values
Darasa
Tumia class
chaguo kubadilisha kiambishi awali cha darasa kinachotumika katika CSS iliyokusanywa. Kwa mfano, kubadilisha kutoka .opacity-*
kwa .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Pato:
.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; }
Huduma tofauti za CSS
Weka css-var
chaguo la boolean true
na API itazalisha vigeuzo vya karibu vya CSS kwa kiteuzi ulichopewa badala ya property: value
sheria za kawaida. Fikiria .text-opacity-*
huduma zetu:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Pato:
.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; }
Vigezo vya CSS vya ndani
Tumia local-vars
chaguo kubainisha ramani ya Sass ambayo itazalisha vigeuzo vya ndani vya CSS ndani ya kanuni za darasa la matumizi. Tafadhali kumbuka kuwa inaweza kuhitaji kazi ya ziada ili kutumia vigeuzo hivyo vya karibu vya CSS katika sheria za CSS zinazozalishwa. Kwa mfano, fikiria .bg-*
huduma zetu:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Pato:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
Mataifa
Tumia state
chaguo kutoa tofauti za darasa bandia. Mfano madarasa ya uwongo ni :hover
na :focus
. Wakati orodha ya majimbo inatolewa, majina ya darasa huundwa kwa darasa hilo bandia. Kwa mfano, ili kubadilisha uwazi kwenye kielelezo, ongeza state: hover
na utapata .opacity-hover:hover
CSS yako iliyokusanywa.
Je, unahitaji madarasa mengi ya uwongo? Tumia orodha iliyotenganishwa na nafasi ya majimbo: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Pato:
.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; }
Msikivu
Ongeza responsive
boolean ili kutoa huduma zinazoweza kuitikia (kwa mfano, .opacity-md-25
) katika sehemu zote za kukatiza .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Pato:
.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; }
}
Chapisha
Kuwasha print
chaguo pia kutazalisha madarasa ya matumizi ya kuchapishwa, ambayo yanatumika tu ndani ya @media print { ... }
hoja ya midia.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Pato:
.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; }
}
Umuhimu
Huduma zote zinazozalishwa na API ni pamoja !important
na kuhakikisha zinabatilisha vipengele na madarasa ya kurekebisha kama ilivyokusudiwa. Unaweza kubadilisha mpangilio huu kimataifa na $enable-important-utilities
utofautishaji (chaguo-msingi hadi true
).
Kwa kutumia API
Kwa kuwa sasa unajua jinsi API ya huduma inavyofanya kazi, jifunze jinsi ya kuongeza madarasa yako maalum na urekebishe huduma zetu chaguomsingi.
Batilisha huduma
Batilisha huduma zilizopo kwa kutumia ufunguo sawa. Kwa mfano, ikiwa unataka madarasa ya ziada ya matumizi ya kufurika, unaweza kufanya hivi:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Ongeza huduma
Huduma mpya zinaweza kuongezwa kwenye $utilities
ramani chaguo-msingi na map-merge
. Hakikisha faili zetu zinazohitajika za Sass na _utilities.scss
zinaletwa kwanza, kisha utumie map-merge
kuongeza huduma zako za ziada. Kwa mfano, hapa kuna jinsi ya kuongeza cursor
matumizi sikivu yenye thamani tatu.
@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,
)
)
);
Rekebisha huduma
$utilities
Rekebisha huduma zilizopo katika ramani chaguo-msingi map-get
na map-merge
vitendaji. Katika mfano ulio hapa chini, tunaongeza thamani ya ziada kwa width
huduma. Anza na ya awali map-merge
na kisha taja ni matumizi gani unataka kurekebisha. Kutoka hapo, leta "width"
ramani iliyoorodheshwa nayo map-get
ili kufikia na kurekebisha chaguo na thamani za shirika.
@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%),
),
),
),
)
);
Washa mwitikio
Unaweza kuwasha madarasa jibu kwa seti iliyopo ya huduma ambazo hazifanyi kazi kwa chaguomsingi kwa sasa. Kwa mfano, kufanya border
madarasa kuitikia:
@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 ),
),
)
);
Hii sasa itazalisha tofauti sikivu za .border
na .border-0
kwa kila sehemu ya kukanusha. CSS yako iliyotolewa itaonekana kama hii:
.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 { ... }
}
Badilisha jina la huduma
Je, umekosa huduma za v4, au umezoea mkusanyiko mwingine wa majina? API ya huduma inaweza kutumika kubatilisha matokeo class
ya matumizi fulani-kwa mfano, kubadili jina .ms-*
la huduma kuwa 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 ),
),
)
);
Ondoa huduma
Ondoa huduma zozote za msingi kwa kuweka ufunguo wa kikundi kwa null
. Kwa mfano, ili kuondoa width
huduma zetu zote, unda $utilities
map-merge
na uongeze "width": null
ndani.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Ondoa matumizi katika RTL
Baadhi ya vipochi vya makali hufanya uwekaji wa mitindo wa RTL kuwa mgumu , kama vile kukatika kwa mistari kwa Kiarabu. Kwa hivyo huduma zinaweza kupunguzwa kutoka kwa pato la RTL kwa kuweka rtl
chaguo kwa false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Pato:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Hii haitoi chochote katika RTL, shukrani kwa maagizo ya udhibiti wa RTLCSSremove
.