Gean nei haadynhâld Gean nei dokumintnavigaasje
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 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 kaartkaai, is it net kompilearre.
class Fakultatyf Fariabele foar de klasse namme as jo net wolle dat it is itselde as it pân. As jo ​​​​de classkaai net leverje en propertykaai is in array fan snaren, sil de klassenamme it earste elemint fan 'e propertyarray wêze.
state Fakultatyf List fan pseudo-klasse farianten lykas :hoverof :focuste generearjen foar it nut. Gjin standertwearde.
responsive Fakultatyf Boolean oanjout as responsive klassen moatte wurde oanmakke. falsestandert.
rfs Fakultatyf Boolean om floeistofferskaling mooglik te meitsjen. Besjoch de RFS- side om út te finen hoe't dit wurket. falsestandert.
print Fakultatyf Boolean oanjout as printklassen oanmakke wurde moatte. falsestandert.
rtl Fakultatyf Boolean oanjout as nut yn RTL hâlden wurde moat. truestandert.

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

Oanpaste klasse foarheaksel

Brûk de classopsje om it klasseprefix te feroarjen dat brûkt wurdt yn 'e kompilearre CSS:

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

Utfier:

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

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 utilities

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

It feroarjen fan nutsbedriuwen

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

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.

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 .