Utility API
Utility API är ett Sass-baserat verktyg för att generera verktygsklasser.
Bootstrap-verktyg genereras med vårt verktygs-API och kan användas för att modifiera eller utöka vår standarduppsättning verktygsklasser via Sass. Vårt verktygs-API är baserat på en serie Sass-kartor och funktioner för att generera klassfamiljer med olika alternativ. Om du inte är bekant med Sass-kartor, läs upp de officiella Sass-dokumenten för att komma igång.
Kartan $utilities
innehåller alla våra verktyg och slås senare samman med din anpassade $utilities
karta, om den finns. Verktygskartan innehåller en lista över verktygsgrupper som accepterar följande alternativ:
Alternativ | Typ | Standardvärde | Beskrivning |
---|---|---|---|
property |
Nödvändig | – | Namnet på egenskapen, detta kan vara en sträng eller en rad strängar (t.ex. horisontella stoppningar eller marginaler). |
values |
Nödvändig | – | Värdelista eller en karta om du inte vill att klassnamnet ska vara detsamma som värdet. Om null den används som kartnyckel är den inte kompilerad. |
class |
Frivillig | null | Namnet på den genererade klassen. Om det inte tillhandahålls och property är en array av strängar, class kommer det att vara det första elementet i property arrayen som standard. |
css-var |
Frivillig | false |
Boolean för att generera CSS-variabler istället för CSS-regler. |
local-vars |
Frivillig | null | Karta över lokala CSS-variabler att generera utöver CSS-reglerna. |
state |
Frivillig | null | Lista över pseudoklassvarianter (t.ex. :hover eller :focus ) att generera. |
responsive |
Frivillig | false |
Boolean som indikerar om responsiva klasser ska genereras. |
rfs |
Frivillig | false |
Boolean för att möjliggöra vätskeskalning med RFS . |
print |
Frivillig | false |
Boolean som indikerar om utskriftsklasser behöver genereras. |
rtl |
Frivillig | true |
Boolean som indikerar om nyttan ska behållas i RTL. |
API förklarat
Alla verktygsvariabler läggs till $utilities
variabeln i vår _utilities.scss
stilmall. Varje grupp av verktyg ser ut ungefär så här:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Vilket ger ut följande:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Fast egendom
Den nödvändiga property
nyckeln måste ställas in för alla verktyg och den måste innehålla en giltig CSS-egenskap. Den här egenskapen används i det genererade verktygets regeluppsättning. När class
nyckeln utelämnas fungerar den också som standardklassnamn. Tänk på text-decoration
nyttan:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Produktion:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Värderingar
Använd values
nyckeln för att ange vilka värden för det angivna property
som ska användas i de genererade klassnamnen och reglerna. Kan vara en lista eller karta (inställd i verktygen eller i en Sass-variabel).
Som en lista, som med text-decoration
verktyg :
values: none underline line-through
Som en karta, som med opacity
verktyg :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Som en Sass-variabel som ställer in listan eller kartan, som i våra position
verktyg :
values: $position-values
Klass
Använd class
alternativet för att ändra klassprefixet som används i den kompilerade CSS. Till exempel, för att ändra från .opacity-*
till .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Produktion:
.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 variabla verktyg
Ställ in det css-var
booleska alternativet till true
så genererar API:et lokala CSS-variabler för den givna väljaren istället för de vanliga property: value
reglerna. Tänk på våra .text-opacity-*
verktyg:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Produktion:
.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; }
Lokala CSS-variabler
Använd local-vars
alternativet för att ange en Sass-karta som genererar lokala CSS-variabler inom verktygsklassens regeluppsättning. Observera att det kan kräva ytterligare arbete för att konsumera de lokala CSS-variablerna i de genererade CSS-reglerna. Tänk till exempel på våra .bg-*
verktyg:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Produktion:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
stater
Använd state
alternativet för att generera pseudoklassvariationer. Exempel på pseudoklasser är :hover
och :focus
. När en lista över tillstånd tillhandahålls skapas klassnamn för den pseudoklassen. Till exempel, för att ändra opacitet vid hovring, lägg till state: hover
så får du .opacity-hover:hover
in din kompilerade CSS.
Behöver du flera pseudoklasser? Använd en blankstegsseparerad lista över tillstånd: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Produktion:
.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; }
Mottaglig
Lägg till responsive
boolean för att generera responsiva verktyg (t.ex. .opacity-md-25
) över alla brytpunkter .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Produktion:
.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; }
}
Skriva ut
Aktivering av print
alternativet kommer också att generera verktygsklasser för utskrift, som endast tillämpas inom @media print { ... }
mediefrågan.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Produktion:
.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; }
}
Betydelse
Alla verktyg som genereras av API:et inkluderar !important
för att säkerställa att de åsidosätter komponenter och modifieringsklasser som avsett. Du kan växla den här inställningen globalt med $enable-important-utilities
variabeln (standard till true
).
Använder API
Nu när du är bekant med hur API:et för verktyg fungerar kan du lära dig hur du lägger till dina egna anpassade klasser och ändrar våra standardverktyg.
Åsidosätt verktyg
Åsidosätt befintliga verktyg genom att använda samma nyckel. Till exempel, om du vill ha ytterligare responsiva överflödesverktygsklasser kan du göra så här:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Lägg till verktyg
Nya verktyg kan läggas till standardkartan $utilities
med en map-merge
. Se till att våra nödvändiga Sass-filer och _utilities.scss
importeras först, använd sedan för map-merge
att lägga till dina ytterligare verktyg. Så här lägger du till exempel till ett responsivt cursor
verktyg med tre värden.
@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,
)
)
);
Ändra verktyg
Ändra befintliga verktyg i standardkartan $utilities
med map-get
och map-merge
funktioner. I exemplet nedan lägger vi till ett extra värde till width
verktygen. Börja med en initial map-merge
och ange sedan vilket verktyg du vill ändra. Därifrån hämtar du den kapslade "width"
kartan med map-get
för att komma åt och ändra verktygets alternativ och värden.
@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%),
),
),
),
)
);
Aktivera responsiv
Du kan aktivera responsiva klasser för en befintlig uppsättning verktyg som för närvarande inte är responsiva som standard. Till exempel, för att göra border
klasserna responsiva:
@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 ),
),
)
);
Detta kommer nu att generera responsiva variationer av .border
och .border-0
för varje brytpunkt. Din genererade CSS kommer att se ut så här:
.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 { ... }
}
Byt namn på verktyg
Saknar du v4-verktyg, eller är du van vid en annan namnkonvention? Utilities API kan användas för att åsidosätta resultatet class
av ett givet verktyg – till exempel för att byta namn på .ms-*
verktyg till 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 ),
),
)
);
Ta bort verktyg
Ta bort något av standardverktygen genom att ställa in gruppnyckeln till null
. Till exempel, för att ta bort alla våra width
verktyg, skapa en $utilities
map-merge
och lägg till "width": null
inom.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Ta bort verktyget i RTL
Vissa kantfodral gör RTL-styling svår , till exempel radbrytningar på arabiska. Sålunda kan verktyg tas bort från RTL-utgång genom att ställa in rtl
alternativet till false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Produktion:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Detta matar inte ut något i RTL, tack vare RTLCSS remove
-styrdirektivet .