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 geschlësselte Lëscht vun Utilitygruppen déi folgend Optiounen akzeptéieren:

Optioun	Typ	Beschreiwung
`property`	Néideg	Numm vun der Immobilie, dëst kann e String oder eng Rei vu Strings sinn (zB horizontale Paddingen 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, ass et net kompiléiert.
`class`	Fakultativ	Variabel fir den Numm vun der Klass wann Dir net wëllt datt et d'selwecht ass wéi d'Propriétéit. Am Fall wou Dir de Schlëssel net `class`ubitt an de `property`Schlëssel ass eng Array vu Saiten, ass de Klassennumm dat éischt Element vun der `property`Array.
`state`	Fakultativ	Lëscht vu Pseudo-Klass Varianten wéi `:hover`oder `:focus`fir d'Utility ze generéieren. Kee Standardwäert.
`responsive`	Fakultativ	Boolean weist ob reaktiounsfäeger Klassen musse generéiert ginn. `false`par défaut.
`rfs`	Fakultativ	Boolesch fir Flëssegkeetsreskaléierung z'erméiglechen. Kuckt Iech op der RFS Säit fir erauszefannen wéi dëst funktionnéiert. `false`par défaut.
`print`	Fakultativ	Boolesche beweist ob Drockklassen musse generéiert ginn. `false`par défaut.
`rtl`	Fakultativ	Boolean weist ob d'Utility soll op RTL gehale ginn. `true`par défaut.

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

Benotzerdefinéiert Klass Präfix

Benotzt d' classOptioun fir de Klassprefix ze änneren, deen an der kompiléierter CSS benotzt gëtt:

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

Ausgang:

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

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, gi 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; }

Responsabel Utilities

Füügt d' responsiveBoolesch fir reaktiounsfäeg 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; }
}

Utilities änneren

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

Drécken Utilities

printD' Optioun aktivéieren generéiert och Utility-Klassen fir Drécken, 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.

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/utilities";

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

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/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

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/utilities";

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

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/utilities";

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

Utilities ewechhuelen

Ewechzehuelen all Standard Utilities andeems Dir de Gruppschlëssel op setzt null. Zum Beispill, fir all eis widthUtilities ze läschen, erstellt e $utilities map-mergea füügt "width": nullbannen.

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

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

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 .