Utility API

D'Utility API ass e Sass-baséiert Tool fir Utilityklassen ze generéieren.

Op dëser Säit

Bootstrap Utilities gi mat eisem Utility API generéiert a kënne benotzt ginn fir eise Standard Set vun Utility Klassen iwwer Sass z'änneren oder ze verlängeren. Eis Utility API baséiert op enger Serie vu Sass Kaarten a Funktiounen fir Famillen vu Klassen mat verschiddenen Optiounen ze generéieren. Wann Dir net mat Sass Kaarten vertraut sidd, liest op déi offiziell Sass Dokumenter fir unzefänken.

D' $utilitiesKaart enthält all eis Utilities a gëtt spéider mat Ärer personaliséierter $utilitiesKaart fusionéiert, wann et präsent ass. D'Utilitykaart enthält eng Schlëssellëscht vun Utilitygruppen déi folgend Optiounen akzeptéieren:

Optioun	Typ	Default Wäert	Beschreiwung
`property`	Néideg	-	Numm vun der Immobilie, dëst kann e String oder eng Rei vu Saiten sinn (zB horizontale Paddings oder Margen).
`values`	Néideg	-	Lëscht vu Wäerter, oder eng Kaart wann Dir net wëllt datt de Klassennumm d'selwecht wéi de Wäert ass. Wann `null`als Kaartschlëssel benotzt gëtt, `class`ass net dem Klassennumm virgesinn.
`class`	Fakultativ	null	Numm vun der generéiert Klass. Wann net geliwwert an `property`ass eng Array vu Saiten, `class`gëtt de Standard op dat éischt Element vun der `property`Array. Wann net geliwwert an `property`eng String ass, ginn d' `values`Schlësselen fir d' `class`Nimm benotzt.
`css-var`	Fakultativ	`false`	Boolean fir CSS Variablen ze generéieren anstatt CSS Regelen.
`css-variable-name`	Fakultativ	null	Benotzerdefinéiert un-prefixed Numm fir d'CSS Variabel bannent de Regelenset.
`local-vars`	Fakultativ	null	Kaart vun lokalen CSS Variablen fir zousätzlech zu den CSS Regelen ze generéieren.
`state`	Fakultativ	null	Lëscht vun Pseudo-Klass Varianten (zB `:hover`oder `:focus`) ze generéieren.
`responsive`	Fakultativ	`false`	Boolean weist ob reaktiounsfäeger Klassen solle generéiert ginn.
`rfs`	Fakultativ	`false`	Boolean fir Flëssegkeetsreskaléierung mat RFS z'erméiglechen .
`print`	Fakultativ	`false`	Boolesche beweist ob Drockklassen musse generéiert ginn.
`rtl`	Fakultativ	`true`	Boolean weist ob d'Utility soll op RTL gehale ginn.

API erkläert

All Utility Variablen ginn an d' $utilitiesVariabel an eisem _utilities.scssStylesheet bäigefüügt. All Grupp vun Utilities gesäit sou eppes aus:

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

Wat déi folgend erauskënnt:

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

Immobilie

Den erfuerderleche propertySchlëssel muss fir all Utility gesat ginn, an et muss eng valabel CSS Eegeschafte enthalen. Dëse Besëtz gëtt am generéierten Utility Regeleset benotzt. Wann de classSchlëssel ewechgelooss gëtt, déngt et och als Standardklass Numm. Bedenkt d' text-decorationUtility:

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

Ausgang:

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

Wäerter

Benotzt de valuesSchlëssel fir ze spezifizéieren wéi eng Wäerter fir déi spezifizéiert propertysollen an de generéierten Klassennimm a Regelen benotzt ginn. Kann eng Lëscht oder Kaart sinn (an den Utilities gesat oder an enger Sass Variabel).

Als Lëscht, wéi mat text-decorationUtilities :

values: none underline line-through

Als Kaart, wéi mat opacityUtilities :

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

Als Sass Variabel déi d'Lëscht oder d'Kaart setzt, wéi an eisen positionUtilities :

values: $position-values

Klass

Benotzt d' classOptioun fir de Klassprefix ze änneren, deen an der kompiléierter CSS benotzt gëtt. Zum Beispill, fir ze änneren .opacity-*op .o-*:

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

Ausgang:

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

Wann class: null, generéiert Klassen fir jiddereng vun de valuesSchlësselen:

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

Ausgang:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS Variabel Utilities

Setzt d' css-varboolesch Optioun op truean d'API generéiert lokal CSS Variablen fir de gegebene Selektor anstatt déi üblech property: valueReegelen. Füügt eng fakultativ css-variable-namefir en anere CSS Variabelnumm ze setzen wéi de Klassennumm.

Betruecht eis .text-opacity-*Utilities. Wa mir d' css-variable-nameOptioun addéieren, kréie mir e personaliséierten Output.

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

Ausgang:

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

Lokal CSS Verännerlechen

Benotzt d' local-varsOptioun fir eng Sass Kaart ze spezifizéieren déi lokal CSS Variablen am Regeleset vun der Utility Klass generéiert. Notéiert w.e.g. datt et zousätzlech Aarbecht erfuerdert fir déi lokal CSS Variablen an de generéierte CSS Reegelen ze konsuméieren. Zum Beispill, betruecht eis .bg-*Utilities:

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

Ausgang:

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

Staaten

Benotzt d' stateOptioun fir Pseudo-Klass Variatiounen ze generéieren. Beispill Pseudo-Klassen sinn :hoveran :focus. Wann eng Lëscht vu Staaten zur Verfügung gestallt gëtt, ginn Klassennimm fir dës Pseudo-Klass erstallt. Zum Beispill, fir Opazitéit beim Hover z'änneren, füügt derbäi state: hoveran Dir kritt .opacity-hover:hoveran Ärem kompiléierte CSS.

Braucht Dir verschidde Pseudo-Klassen? Benotzt eng Plaz getrennt Lëscht vu Staaten state: hover focus:.

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

Ausgang:

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

Reaktiounsfäeger

Füügt d' responsiveBoolean fir reaktiounsfäeger Utilities (zB .opacity-md-25) iwwer all Breakpoints ze generéieren .

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

Ausgang:

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

Drécken

printD' Optioun aktivéieren generéiert och Utility-Klassen fir Dréckerei, déi nëmmen an der @media print { ... }Mediaquery applizéiert ginn.

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

Ausgang:

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

Wichtegkeet

All Utilities generéiert vun der API enthalen !importantfir sécherzestellen datt se Komponenten a Modifizéierungsklassen iwwerschreiden wéi virgesinn. Dir kënnt dës Astellung global mat der $enable-important-utilitiesVariabel wiesselen (Standard op true).

Benotzt d'API

Elo datt Dir vertraut sidd wéi d'Utilities API funktionnéiert, léiert wéi Dir Är eege personaliséiert Klassen derbäi kënnt an eis Standard Utilities änneren.

Iwwerdribblen Utilities

Iwwerdribblen existent Utilities andeems Dir dee selwechte Schlëssel benotzt. Zum Beispill, wann Dir zousätzlech reaktiounsfäeger Iwwerfloss Utility Klassen wëllt, kënnt Dir dëst maachen:

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

Utilities addéieren

Nei Utilities kënnen op d'Standardkaart $utilitiesmat enger map-merge. Vergewëssert Iech datt eis erfuerderlech Sass Dateien _utilities.scssals éischt importéiert sinn, benotzt dann map-mergefir Är zousätzlech Utilities ze addéieren. Zum Beispill, hei ass wéi Dir e reaktiounsfäeger cursorUtility mat dräi Wäerter derbäi kënnt.

@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 änneren

Änneren existéierend Utilities an der Standardkaart $utilitiesmat map-geta map-mergeFunktiounen. Am Beispill hei drënner addéiere mir en zousätzleche Wäert fir d' widthUtilities. Fänkt mat engem initialen map-mergeun a spezifizéiert dann wéi eng Utility Dir wëllt änneren. Vun do aus, haalt déi nestéiert "width"Kaart mat map-getfir Zougang an d'Optiounen a Wäerter vum Utility z'änneren.

@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";

Aktivéiert reaktiounsfäeger

Dir kënnt reaktiounsfäeger Klassen fir eng existent Set vun Utilities aktivéieren déi am Moment net als Standard reaktiounsfäeger sinn. Zum Beispill, fir d' borderKlassen reaktiounsfäeger ze maachen:

@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";

Dëst wäert elo reaktiounsfäeger Variatiounen vun .bordera .border-0fir all breakpoint generéieren. Är generéiert CSS wäert esou ausgesinn:

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

Utilities ëmbenennen

Vermësst v4 Utilities, oder benotzt fir eng aner Nummkonventioun? D'Utilities API ka benotzt ginn fir d'Resultat classvun engem bestëmmten Utility ze iwwerschreiden - zum Beispill fir .ms-*Utilities op Oldish ëmbenennen .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 ewechhuelen

Ewechzehuelen all Standard Utilities mat der map-remove()Sass Funktioun .

@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";

Dir kënnt och d' map-merge()Sass Funktioun benotzen an de Gruppschlëssel setzen nullfir den Utility ze läschen.

@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";

Addéieren, ewechhuelen, änneren

Dir kënnt vill Utilities op eemol mat der map-merge()Sass Funktioun addéieren, ewechhuelen an änneren . Hei ass wéi Dir déi fréier Beispiller an eng méi grouss Kaart kombinéiere kënnt.

@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";

Ewechzehuelen Utility an RTL

E puer Randfäegkeeten maachen den RTL-Styling schwéier , sou wéi Linnenausbréch op arabesch. Also Utilities kënnen aus RTL Output erofgelooss ginn andeems Dir d' rtlOptioun op setzt false:

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

Ausgang:

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

Dëst bréngt näischt an RTL eraus, dank der RTLCSS removeKontrolldirektiv .