API ya utilitaire

API ya utilitaire ezali esaleli oyo esalemi na Sass mpo na kobimisa ba classes ya utilité.

Na lokasa oyo

Ba utilitaires ya Bootstrap esalemi na API ya utilitaire na biso mpe ekoki kosalelama mpo na ko modifier to ko prolonger ensemble na biso ya ba classes ya utilitaires par défaut na nzela ya Sass. API na biso ya utilitaire ezali na base ya série ya ba cartes ya Sass na ba fonctions pona ko générer ba familles ya ba classes na ba options ndenge na ndenge. Soki oyebi ba cartes ya Sass te, tanga likolo na ba docs officiels ya Sass pona kobanda.

Karte $utilitiesezali na ba utilitaires na biso nionso mpe na sima esangani na $utilitiescarte personnalisé na yo, soki ezali. Carte ya utilitaire ezali na liste ya ba groupes ya utilité oyo ezali na ba clés oyo endimaka ba options oyo elandi:

Liponi	Lolenge	Ndimbola
`property`	Esengami	Kombo ya propriété, oyo ekoki kozala molongo to ensemble ya ba chaînes (ndakisa, ba paddings horizontales to ba marges).
`values`	Esengami	Liste ya ba valeurs, to carte soki olingi te kombo ya classe ezala ndenge moko na valeur. Soki `null`esalelami lokola fungola ya karte, esangisami te.
`class`	Soki olingi	Variable pona kombo ya classe soki olingi te ezala ndenge moko na propriété. Na cas opesi `class`clé te mpe `property`clé ezali array ya ba chaînes, kombo ya classe ekozala élément ya liboso ya `property`array.
`state`	Soki olingi	Liste ya ba variantes ya pseudo-classe lokola `:hover`to `:focus`pona ko générer pona utilitaire. Valeur ya défaut te.
`responsive`	Soki olingi	Boolean oyo ezali kolakisa soki esengeli kosala ba classes responsives. `false`na ndenge ya libela.
`rfs`	Soki olingi	Boolean mpo na ko permettre rescaling ya fluide. Tala na lokasa ya RFS mpo na koyeba ndenge nini yango esalaka. `false`na ndenge ya libela.
`print`	Soki olingi	Boolean oyo ezali kolakisa soki esengeli kosala ba classes ya impression. `false`na ndenge ya libela.
`rtl`	Soki olingi	Boolean oyo ezali kolakisa soki esengeli kobatela utilitaire na RTL. `true`na ndenge ya libela.

API elimbolaki

Ba variables nionso ya utilité ebakisami na $utilitiesvariable na kati ya _utilities.scssfeuille de style na biso. Groupe moko na moko ya ba utilités ezo monana eloko moko boye:

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

Oyo ebimisaka makambo oyo elandi:

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

Préfixe ya classe personnalisé

Salelá classoption mpo na kobongola préfixe ya kelasi oyo esalelami na CSS oyo esangisi:

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

Bobimisi:

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

Ba Etats

Salelá stateoption mpo na kobimisa ba variations ya pseudo-classe. Ndakisa ba pseudo-classes ezali :hovermpe :focus. Tango liste ya ba états epesami, ba kombo ya ba classes esalemi pona pseudo-classe wana. Par exemple, pona ko changer opacité na hover, bakisa state: hoverpe okozua .opacity-hover:hoverna CSS na yo compilé.

Esengeli na ba pseudo-classes ebele? Salelá liste ya ba états oyo ekabolami na esika: state: hover focus.

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

Bobimisi:

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

Ba utilités oyo ezo répondre

Bakisa responsiveboolean mpo na kobimisa ba utilitaires ya eyano (ndakisa, .opacity-md-25) na kati ya ba points de rupture nionso .

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

Bobimisi:

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

Kobongola ba utilités

Bolongola ba utilitaires oyo ezali na kosalelaka fungola moko. Ndakisa, soki olingi ba classes ya utilitaire ya débordement réponse ya kobakisa, okoki kosala boye:

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

Ba utilitaires ya imprimerie

Kofungola printoption ekosala mpe ba classes ya utilitaire mpo na impression, oyo esalelamaka kaka na kati ya @media print { ... }requête ya media.

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

Bobimisi:

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

Ntina ya ntina

Ba utilitaires nionso oyo esalemi na API esangisi !importantpona ko assurer que ba overrider ba composants na ba classes ya modificateur ndenge esengelaki. Okoki kobongola paramètre oyo na mokili mobimba na $enable-important-utilitiesvariable (ezali na ndenge ya liboso na true).

Kosalela API

Sikoyo lokola oyebi malamu ndenge API ya ba utilitaires esalaka, yekola ndenge ya kobakisa ba classes na yo moko ya personnalisé mpe kobongola ba utilitaires na biso ya défaut.

Bakisa ba utilités

Ba utilitaires ya sika ekoki kobakisama na $utilitiescarte par défaut na map-merge. Sala que ba fichiers na biso ya Sass oyo esengeli pe _utilities.scssezala importé liboso, sima salela map-mergepona kobakisa ba utilitaires na yo ya kobakisa. Ndakisa, awa ezali ndenge ya kobakisa cursorutilitaire responsive na ba valeurs misato.

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

Bobongola ba utilités

$utilitiesModifier ba utilitaires existants na carte par défaut na na map-getba map-mergefonctions. Na ndakisa oyo ezali awa na nse, tozali kobakisa motuya mosusu na ba widthutilitaires. Bandá na ebandeli map-mergempe na nsima lakisá utilitaire nini olingi kobongisa. "width"Uta kuna, zwa carte encastrée na mpo na map-getko accéder mpe ko modifier ba options mpe ba valeurs ya utilitaire.

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

Activer ya ko répondre

Okoki ko activer ba classes responsives pona ensemble ya ba utilitaires existants oyo ezali responsive te na tango oyo par défaut. Na ndakisa, mpo na kosala ete borderbakelasi ezala na eyano:

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

Yango ekobimisa sikoyo ba variations responsives ya .bordermpe .border-0mpo na point de rupture moko na moko. CSS na yo oyo osali ekozala boye:

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

Bobongola nkombo ya ba utilitaires

Ba utilitaires v4 ezangi, to omesana na convention mosusu ya kopesa ba kombo? API ya ba utilitaires ekoki kosalelama mpo na koboya résultat classya utilitaire moko epesami —ndakisa, kobongola kombo .ms-*ya ba utilitaires na vieux .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 ),
    ),
  )
);

Longola ba utilités

Longola moko ya ba utilitaires ya défaut na kotiya touche ya groupe na null. Na ndakisa, mpo na kolongola ba widthutilitaires na biso nyonso, salá a $utilities map-mergempe bakisa "width": nullna kati.

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

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

Longola utilitaire na RTL

Ba cas mosusu ya bord esalaka que RTL styling ezala difficile , lokola ba line breaks na Arabe. Na yango ba utilitaires ekoki kobwakama na sortie RTL na kotiya rtloption na false:

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

Bobimisi:

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

Yango ebimisaka eloko te na RTL, grâce na directive ya contrôle ya RTLCSSremove .