Erabilgarritasun APIa
Utility API Sass-en oinarritutako tresna bat da, erabilgarritasun-klaseak sortzeko.
Bootstrap utilitateak gure erabilgarritasun APIarekin sortzen dira eta Sass-en bidez gure erabilgarritasun-klase multzo lehenetsiak aldatzeko edo zabaltzeko erabil daitezke. Gure erabilgarritasun APIa Sass mapa eta funtzio multzo batean oinarritzen da, hainbat aukera dituzten klase-familiak sortzeko. Sass mapak ezagutzen ez badituzu, irakurri Sass dokumentu ofizialak hasteko.
Mapak $utilities
gure utilitate guztiak ditu eta gero zure mapa pertsonalizatuarekin bateratzen da $utilities
, baldin badago. Erabilgarritasun-mapak aukera hauek onartzen dituzten erabilgarritasun-taldeen zerrenda bat dauka:
Aukera | Mota | Balio lehenetsia | Deskribapena |
---|---|---|---|
property |
Beharrezkoa | – | Propietatearen izena, kate bat edo kate-matrize bat izan daiteke (adibidez, betegarri horizontalak edo marjinak). |
values |
Beharrezkoa | – | Balioen zerrenda edo mapa bat ez baduzu nahi klasearen izena balioaren berdina izatea. null Mapa-gako gisa erabiltzen bada , ez da konpilatzen. |
class |
Aukerakoa | nulua | Sortutako klasearen izena. Ematen ez bada eta property kateen array bat bada, matrizeko class lehen elementua izango da lehenetsia property . |
css-var |
Aukerakoa | false |
Boolearra CSS arauen ordez CSS aldagaiak sortzeko. |
local-vars |
Aukerakoa | nulua | Tokiko CSS aldagaien mapa CSS arauez gain sortzeko. |
state |
Aukerakoa | nulua | Sortu beharreko sasi-klaseen aldaeren zerrenda (adibidez, :hover edo :focus ). |
responsive |
Aukerakoa | false |
Klase sentikorrak sortu behar diren ala ez adierazten duen boolearra. |
rfs |
Aukerakoa | false |
Boolearra RFSrekin fluidoen eskalatzea gaitzeko . |
print |
Aukerakoa | false |
Inprimatzeko klaseak sortu behar diren adierazten duen boolearra. |
rtl |
Aukerakoa | true |
Baliagarritasuna RTL-n mantendu behar den adierazten duen boolearra. |
API azaldu da
$utilities
Erabilgarritasun-aldagai guztiak gure _utilities.scss
estilo -orri barruan aldagaiari gehitzen zaizkio . Utilitate talde bakoitzak honelako itxura du:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Honek hurrengoa ateratzen du:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Jabetza
Beharrezko property
gakoa edozein utilitatetarako ezarri behar da, eta baliozko CSS propietate bat izan behar du. Propietate hau sortutako utilitatearen arau multzoan erabiltzen da. Gakoa baztertzen denean class
, klase-izen lehenetsi gisa ere balio du. Kontuan izan text-decoration
erabilgarritasuna:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Irteera:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Balioak
Erabili gakoa sortutako klaseen izenetan eta arauetan values
zehaztutako zein balio erabili behar diren zehazteko. property
Zerrenda edo mapa bat izan daiteke (utilitateetan edo Sass aldagai batean ezarrita).
Zerrenda gisa, text-decoration
utilitateekin bezala :
values: none underline line-through
Mapa gisa, opacity
utilitateekin bezala :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Zerrenda edo mapa ezartzen duen Sass aldagai gisa, gure position
utilitateetan bezala :
values: $position-values
Klasea
Erabili class
aukera konpilatutako CSS-an erabiltzen den klase-aurrizkia aldatzeko. Adibidez, hona .opacity-*
aldatzeko .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Irteera:
.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 aldagaien utilitateak
Ezarri css-var
aukera boolearra true
eta APIak tokiko CSS aldagaiak sortuko ditu emandako hautatzailerako, ohiko property: value
arauen ordez. Kontuan izan gure .text-opacity-*
utilitateak:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Irteera:
.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; }
CSS tokiko aldagaiak
Erabili local-vars
aukera erabilgarritasun klasearen arau-multzoan CSS tokiko aldagaiak sortuko dituen Sass mapa bat zehazteko. Kontuan izan litekeela lan gehiago behar dela CSS aldagai lokal horiek sortutako CSS arauetan kontsumitzeko. Adibidez, kontuan hartu gure .bg-*
utilitateak:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Irteera:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
Estatuak
Erabili state
aukera sasi-klaseen aldakuntzak sortzeko. Sasi-klase adibideak :hover
eta dira :focus
. Egoera zerrenda bat ematen denean, sasi-klase horretarako klase-izenak sortzen dira. Adibidez, pasatzean opakutasuna aldatzeko, gehitu state: hover
eta .opacity-hover:hover
konpilatutako CSS-an sartuko zara.
Sasi-klase anitz behar dituzu? Erabili zuriunez bereizitako egoera zerrenda bat: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Irteera:
.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; }
Erantzunkorra
Gehitu boolearra eten puntu guztietanresponsive
erantzuteko utilitateak sortzeko (adibidez, .opacity-md-25
) .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Irteera:
.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; }
}
Inprimatu
print
Aukera gaituz gero , inprimatzeko erabilgarritasun-klaseak ere sortuko dira, @media print { ... }
multimedia-kontsultaren barruan soilik aplikatzen direnak.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Irteera:
.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; }
}
Garrantzia
APIak sortutako utilitate guztiek !important
osagaiak eta modifikatzaile klaseak nahi bezala gainidazten dituztela ziurtatzeko barne hartzen dute. Ezarpen hau orokorrean alda dezakezu $enable-important-utilities
aldagaiarekin (lehenetsia true
).
APIa erabiliz
Utilitateen APIak nola funtzionatzen duen ezagutzen duzunez, ikasi zure klase pertsonalizatuak gehitzen eta gure utilitate lehenetsiak aldatzen.
Gainidatzi utilitateak
Gainidatzi lehendik dauden utilitateak gako bera erabiliz. Esate baterako, gainezka-erabilgarritasun klase gehigarriak nahi badituzu, hau egin dezakezu:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Gehitu utilitateak
Utilitate berriak gehi daitezke $utilities
mapa lehenetsian map-merge
. Ziurtatu gure beharrezko Sass fitxategiak eta _utilities.scss
inportatzen direla lehenik, eta gero erabili map-merge
zure utilitate gehigarriak gehitzeko. cursor
Esate baterako, hona hemen hiru balio dituen erabilgarritasun sentikorra nola gehitu .
@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,
)
)
);
Aldatu utilitateak
$utilities
Aldatu lehendik dauden utilitateak mapa lehenetsian map-get
eta map-merge
funtzioekin. Beheko adibidean, balio gehigarri bat gehitzen ari gara width
utilitateei. Hasi hasierako batekin map-merge
eta, ondoren, zehaztu zein utilitate aldatu nahi duzun. Hortik aurrera, eskuratu habiaraturiko "width"
mapa map-get
erabilgarritasunaren aukerak eta balioak atzitzeko eta aldatzeko.
@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%),
),
),
),
)
);
Gaitu erantzuleak
Modu lehenetsian erantzuten ez diren utilitate multzo baterako klase sentikorrak gaitu ditzakezu. Adibidez, border
klaseak erantzuteko:
@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 ),
),
)
);
Honek eten-puntu bakoitzaren .border
eta aldaera sentikorrak sortuko ditu orain . .border-0
Sortutako CSS itxura hau izango du:
.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 { ... }
}
Aldatu izena utilitateei
v4 utilitateak falta dira, edo beste izendapen-konbentzio batera erabilita? Utilitateen APIa erabilgarritasun jakin baten emaitza gainidazteko erabil daiteke; class
adibidez, .ms-*
utilitateak zaharragora izendatzeko .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 ),
),
)
);
Kendu utilitateak
Kendu utilitate lehenetsietako bat taldeko gakoa ezarriz null
. Adibidez, gure width
utilitate guztiak kentzeko, sortu bat $utilities
map-merge
eta gehitu "width": null
barruan.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Kendu utilitatea RTL-n
Ertz-kasu batzuek RTL estiloa zailtzen dute, hala nola arabierazko lerro-jauziak. Horrela, utilitateak RTL irteeratik ken daitezke rtl
aukera hau ezarriz false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Irteera:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Honek ez du ezer ateratzen RTL-n, RTLCSS remove
kontrol zuzentarauari esker .