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	Valeur ya défaut	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	ntina te	Kombo ya kelasi oyo esalemi. Soki epesami te mpe `property`ezali ensemble ya ba chaînes, `class`ekozala par défaut na élément ya liboso ya `property`array.
`css-var`	Soki olingi	`false`	Boolean mpo na kobimisa ba variables ya CSS na esika ya mibeko ya CSS.
`local-vars`	Soki olingi	ntina te	Carte ya ba variables ya CSS locale pona ko generer en plus ya mibeko ya CSS.
`state`	Soki olingi	ntina te	Liste ya ba variantes ya pseudo-classe (ndakisa, `:hover`to `:focus`) ya kobimisa.
`responsive`	Soki olingi	`false`	Boolean oyo ezali kolakisa soki esengeli kosala ba classes responsives.
`rfs`	Soki olingi	`false`	Boolean mpo na ko permettre rescaling ya fluide na RFS .
`print`	Soki olingi	`false`	Boolean oyo ezali kolakisa soki esengeli kosala ba classes ya impression.
`rtl`	Soki olingi	`true`	Boolean oyo ezali kolakisa soki esengeli kobatela utilitaire na RTL.

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

Lopango

Esengeli propertykotiya fungola oyo esengeli mpo na utilitaire nionso, mpe esengeli kozala na propriété CSS ya malamu. Propriété oyo esalelami na ensemble ya mibeko ya utilitaire oyo esalemi. Ntango classfungola elongolami, esalaka mpe lokola nkombo ya kelasi ya liboso. Tótalela likambo oyo text-decorationekoki kosalelama:

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

Bobimisi:

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

Mituya ya bato

Salelá valuesfungola mpo na kolakisa motuya nini mpo na oyo elakisami propertyesengeli kosalelama na bankombo ya kelasi mpe mibeko oyo esalemi. Ekoki kozala liste to carte (etiamaki na ba utilitaires to na variable ya Sass).

Lokola liste, lokola na text-decorationba utilités :

values: none underline line-through

Lokola carte, lokola na opacityba utilités :

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

Lokola variable Sass oyo etie liste to carte, lokola na ba positionutilitaires na biso :

values: $position-values

Kelasi

Salelá classoption mpo na kobongola prefixe ya kelasi oyo esalelami na CSS oyo esangisi. Ndakisa, mpo na kobongola uta .opacity-*na kino na .o-*:

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

Bobimisi:

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

Ba utilitaires ya variable ya CSS

Botia css-varoption boolean na truempe API ekobimisa ba variables ya CSS ya esika mpo na moponi oyo epesami na esika ya property: valuemibeko ya momesano. Talá biloko oyo tosalelaka mpo na .text-opacity-*kosalela biloko na biso:

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

Bobimisi:

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

Ba variables ya CSS ya esika

Salelá local-varsoption mpo na kolakisa carte ya Sass oyo ekobimisa ba variables ya CSS ya esika na kati ya ensemble ya mibeko ya classe ya utilitaire. Svp yeba ete ekoki kosenga mosala ya kobakisa mpo na kolya ba variables wana ya CSS ya esika na mibeko ya CSS oyo esalemi. Na ndakisa, tótalela makambo oyo tosalelaka mpo na .bg-*kosalela biloko ya mosala:

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

Bobimisi:

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

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

Koyanola

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

Imprimer

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.

Kolongola ba utilitaires

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

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 .