Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
in English

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 nullwurdt brûkt as map kaai, classwurdt net prepended oan de klasse namme.
class Fakultatyf null Namme fan de generearre klasse. As net foarsjoen en propertyis in array fan snaren, classsil standert nei it earste elemint fan 'e propertyarray. As net opjûn en propertyis in tekenrige, valueswurde de kaaien brûkt foar de classnammen.
css-var Fakultatyf false Boolean om CSS-fariabelen te generearjen ynstee fan CSS-regels.
css-variable-name Fakultatyf null Oanpaste namme sûnder prefix foar de CSS-fariabele binnen de regelset.
local-vars Fakultatyf null Kaart fan lokale CSS fariabelen te generearjen neist de CSS regels.
state Fakultatyf null List fan pseudo-klasse farianten (bgl. :hoverof :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; }

As class: null, generearret klassen foar elk fan 'e valueskaaien:

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

Utfier:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !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. Foegje in opsjoneel css-variable-nameta om in oare CSS-fariabelnamme yn te stellen as de klassenamme.

Tink oan ús .text-opacity-*nutsbedriuwen. As wy de css-variable-nameopsje tafoegje, krije wy in oanpaste útfier.

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

Utfier:

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Utilities fuortsmite

Ferwiderje ien fan 'e standert nutsfoarsjenningen mei de map-remove()Sass-funksje .

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

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

Jo kinne ek de map-merge()Sass-funksje brûke en de groepkaai ynstelle nullom it nut te ferwiderjen.

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

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

@import "bootstrap/scss/utilities/api";

Foegje, fuortsmite, wizigje

Jo kinne in protte nutsbedriuwen tagelyk tafoegje, fuortsmite en wizigje mei de map-merge()Sass-funksje . Hjir is hoe't jo de foarige foarbylden kinne kombinearje yn ien gruttere kaart.

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

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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 .