Utility API

De utility API is in Sass-basearre ark om nutklassen te generearjen.

Op dizze side

Bootstrap-hulpprogramma's wurde generearre mei ús utility-API en kinne brûkt wurde om ús standertset fan nutklassen te wizigjen of út te wreidzjen fia Sass. Us utility API is basearre op in searje Sass-kaarten en funksjes foar it generearjen fan famyljes fan klassen mei ferskate opsjes. As jo net bekend binne mei Sass-kaarten, lês dan op 'e offisjele Sass-dokuminten om te begjinnen.

De $utilitieskaart befettet al ús nutsbedriuwen en wurdt letter gearfoege mei jo oanpaste $utilitieskaart, as oanwêzich. De nutskaart befettet in toetse list mei nutsbedriuwen dy't de folgjende opsjes akseptearje:

Opsje	Type	Standertwearde	Beskriuwing
`property`	Required	-	Namme fan it pân, dit kin in tekenrige wêze as in array fan snaren (bgl. horizontale paddings of marzjes).
`values`	Required	-	List mei wearden, of in kaart as jo net wolle dat de klasse namme itselde is as de wearde. As `null`wurdt brûkt as kaartkaai, is it net kompilearre.
`class`	Fakultatyf	null	Namme fan de generearre klasse. As net foarsjoen en `property`is in array fan snaren, `class`sil standert nei it earste elemint fan 'e `property`array.
`css-var`	Fakultatyf	`false`	Boolean om CSS-fariabelen te generearjen ynstee fan CSS-regels.
`local-vars`	Fakultatyf	null	Kaart fan lokale CSS fariabelen te generearjen neist de CSS regels.
`state`	Fakultatyf	null	List fan pseudo-klasse farianten (bgl. `:hover`of `:focus`) te generearjen.
`responsive`	Fakultatyf	`false`	Boolean oanjout as responsive klassen moatte wurde oanmakke.
`rfs`	Fakultatyf	`false`	Boolean om floeistofferskaling yn te skeakeljen mei RFS .
`print`	Fakultatyf	`false`	Boolean oanjout as printklassen oanmakke wurde moatte.
`rtl`	Fakultatyf	`true`	Boolean oanjout as nut yn RTL hâlden wurde moat.

API ferklearre

Alle brûkbere fariabelen wurde tafoege oan de $utilitiesfariabele binnen ús _utilities.scssstylblêd. Elke groep nutsbedriuwen sjocht der sa út:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Wat it folgjende útfiert:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Besit

De fereaske propertykaai moat ynsteld wurde foar elk nut, en it moat in jildich CSS-eigenskip befetsje. Dit pân wurdt brûkt yn de regelset fan it generearre nut. As de classkaai is weilitten, tsjinnet it ek as de standert klasse namme. Tink oan it text-decorationnut:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Utfier:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

Wearden

Brûk de valueskaai om oan te jaan hokker wearden foar de oantsjutte propertymoatte wurde brûkt yn de generearre klasse nammen en regels. Kin in list of kaart wêze (ynsteld yn 'e nutsbedriuwen of yn in Sass fariabele).

As list, lykas mei text-decorationnutsbedriuwen :

values: none underline line-through

As kaart, lykas by opacitynutsbedriuwen :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

As in Sass-fariabele dy't de list of kaart ynstelt, lykas yn ús positionnutsbedriuwen :

values: $position-values

Klasse

Brûk de classopsje om it klasseprefix te feroarjen dat brûkt wurdt yn 'e kompilearre CSS. Bygelyks om te feroarjen fan .opacity-*nei .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Utfier:

.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 fariabele nutsbedriuwen

Stel de css-varBooleaanske opsje yn trueen de API sil lokale CSS-fariabelen generearje foar de opjûne selektor ynstee fan de gewoane property: valueregels. Tink oan ús .text-opacity-*nutsbedriuwen:

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

Utfier:

.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; }

Lokale CSS fariabelen

Brûk de local-varsopsje om in Sass-kaart oan te jaan dy't lokale CSS-fariabelen sil generearje binnen de regelset fan 'e nutklasse. Tink derom dat it ekstra wurk fereaskje kin om dy lokale CSS-fariabelen te konsumearjen yn 'e oanmakke CSS-regels. Besjoch bygelyks ús .bg-*nutsbedriuwen:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

Utfier:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

Steaten

Brûk de stateopsje om pseudo-klasse fariaasjes te generearjen. Foarbyld fan pseudo-klassen binne :hoveren :focus. As in list mei steaten oanbean wurdt, wurde klassenammen makke foar dy pseudo-klasse. Bygelyks, om dekking te feroarjen by hover, foegje jo ta state: hoveren jo sille .opacity-hover:hoverjo kompilearre CSS krije.

Need meardere pseudo-klassen? Brûk in romte-skieden list fan steaten state: hover focus:.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Utfier:

.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; }

Responsive

Foegje de responsiveboolean ta om responsive utilities (bgl. ) te generearjen .opacity-md-25oer alle brekpunten .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Utfier:

.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; }
}

Ôfdrukke

It ynskeakeljen fan de printopsje sil ek nutklassen generearje foar print, dy't allinich tapast wurde binnen de @media print { ... }mediaquery.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Utfier:

.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; }
}

Belang

Alle nutsbedriuwen generearre troch de API omfetsje !importantom te soargjen dat se komponinten en modifikaasjeklassen oerskriuwe lykas bedoeld. Jo kinne dizze ynstelling globaal wikselje mei de $enable-important-utilitiesfariabele (standert op true).

Mei help fan de API

No't jo fertroud binne mei hoe't de utilities API wurket, learje jo hoe't jo jo eigen oanpaste klassen kinne tafoegje en ús standert nutsbedriuwen oanpasse.

Utilities oerskriuwe

Override besteande nutsbedriuwen mei deselde kaai. As jo bygelyks ekstra responsive overflow-nutsklassen wolle, kinne jo dit dwaan:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Foegje nutsbedriuwen ta

Nije nutsfoarsjenningen kinne wurde tafoege oan de standertkaart $utilitiesmei in map-merge. Soargje derfoar dat ús fereaske Sass-bestannen _utilities.scssearst ymporteare binne, brûk dan de map-mergeom jo ekstra nutsbedriuwen ta te foegjen. Hjir is bygelyks hoe't jo in responsyf cursorhulpprogramma tafoegje mei trije wearden.

@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,
    )
  )
);

Utilities feroarje

Feroarje besteande nutsbedriuwen yn de standert $utilitieskaart mei map-geten map-mergefunksjes. Yn it foarbyld hjirûnder foegje wy in ekstra wearde ta oan de widthnutsbedriuwen. Begjin mei in initial map-mergeen spesifisearje dan hokker hulpprogramma jo wizigje wolle. Foegje dêrwei de nestele "width"kaart mei map-getom tagong te krijen ta de opsjes en wearden fan it hulpprogramma en te feroarjen.

@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%),
        ),
      ),
    ),
  )
);

Responsive ynskeakelje

Jo kinne responsive klassen ynskeakelje foar in besteande set nutsbedriuwen dy't op it stuit net standert reageare. Bygelyks om de borderklassen responsyf te meitsjen:

@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 ),
    ),
  )
);

Dit sil no responsive fariaasjes generearje fan .borderen .border-0foar elk brekpunt. Jo generearre CSS sil der sa útsjen:

.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 { ... }
}

Omneame nutsbedriuwen

Mist v4-hulpprogramma's, of wend oan in oare nammekonvinsje? De utilities API kin brûkt wurde om it resultaat classfan in opjûn hulpprogramma te oerskriuwen - bygelyks om .ms-*nutsbedriuwen omneame nei 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 ),
    ),
  )
);

Utilities fuortsmite

Ferwiderje ien fan 'e standert nutsfoarsjenningen troch de groepkaai yn te stellen op null. Bygelyks, om al ús widthnutsbedriuwen te ferwiderjen, meitsje in $utilities map-mergeen tafoegje "width": nullbinnen.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

Fuortsmite nut yn RTL

Guon rânegefallen meitsje RTL-styling lestich , lykas line breaks yn Arabysk. Sa kinne nutsbedriuwen wurde sakke fan RTL-útfier troch de rtlopsje yn te stellen op false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Utfier:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Dit jout neat út yn RTL, tank oan de RTLCSS remove-kontrôlerjochtline .