API ti utilidad

Ti utilidad nga API ket maysa a Sass-a naibatay nga alikamen tapno mangpataud kadagiti klase ti utilidad.

Iti daytoy a panid

Dagiti utilidad ti bootstrap ket napataud babaen ti API ti utilidadmi ken mabalin nga usaren a mangbalbaliw wenno mangpalawa ti default a grupomi kadagiti klase ti utilidad babaen ti Sass. Ti utilidad nga APImi ket naibatay iti serye dagiti mapa ti Sass ken dagiti panagandar para iti panagpataud kadagiti pamilia dagiti klase nga addaan kadagiti nadumaduma a pagpilian. No dika pamiliar kadagiti mapa ti Sass, basaem nga agpangato kadagiti opisial a docs ti Sass tapno mangrugika.

Ti $utilitiesmapa ket naglaon kadagiti amin a utilidadmi ken kalpasanna ket maitipon iti kostumbre $utilitiesa mapam, no adda. Ti mapa ti utilidad ket aglaon ti nai-key a listaan dagiti grupo ti utilidad a mangawat kadagiti sumaganad a pagpilian:

Pagpilian	Tipo	Panangiladawan
`property`	Kasapulan	Nagan ti tagikua, daytoy ket mabalin a maysa a kuerdas wenno ti maysa a panagurnos dagiti kuerdas (kas pagarigan, dagiti horisontal a padding wenno dagiti pingir).
`values`	Kasapulan	Listaan dagiti pateg, wenno ti mapa no dimo kayat a ti nagan ti klase ket kapada ti pateg. No `null`maus-usar a kas tulbek ti mapa, saan a naurnong daytoy.
`class`	Opsional	Variable para iti nagan ti klase no dimo kayat a kapada ti sanikua. No kas pagarigan a saanmo nga ipaay ti `class`tulbek ken `property`ti tulbek ket maysa nga urnos dagiti kuerdas, ti nagan ti klase ket isunto ti umuna nga elemento ti `property`urnos.
`state`	Opsional	Listaan dagiti pseudo-klase a variante a kas `:hover`wenno `:focus`tapno mangpataud para iti utilidad. Awan ti default a pateg.
`responsive`	Opsional	Boolean a mangipakpakita no dagiti sumungsungbat a klase ket kasapulan a mapartuat. `false`babaen ti default.
`rfs`	Opsional	Boolean tapno mapalubosan ti panag-rescale ti pluido. Kitaen ti panid ti RFS tapno maammuan no kasano nga agtrabaho daytoy. `false`babaen ti default.
`print`	Opsional	Boolean a mangipakpakita no dagiti klase ti panagimaldit ket kasapulan a mapartuat. `false`babaen ti default.
`rtl`	Opsional	Boolean a mangipakpakita no ti utilidad ket rumbeng a maidulin iti RTL. `true`babaen ti default.

API ti nailawlawag

Amin a utility variables ket mainayon iti $utilitiesvariable iti uneg ti _utilities.scssstylesheettayo. Tunggal grupo dagiti utilidad ket kasla kastoy:

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

A mangiruar kadagiti sumaganad:

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

Kostumbre a prefix ti klase

Usaren ti classpagpilian a mangbalbaliw ti prefix ti klase a naus-usar iti naurnong a CSS:

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

Rimmuar: .

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

Estado

Usaren ti statepagpilian tapno mangpataud kadagiti pseudo-klase a panagduduma. Dagiti pagarigan a pseudo-klase ket :hoverken :focus. No ti listaan dagiti estado ket naited, dagiti nagan ti klase ket naparsua para iti dayta a pseudo-klase. Kas pagarigan, tapno agbaliw ti opacity iti hover, inayon state: hoverken makastrekka .opacity-hover:hoveriti naurnong a CSS-mo.

Kasapulan kadi ti adu a pseudo-classes? Usaren ti listaan dagiti estado a naisina iti espasio: state: hover focus.

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

Rimmuar: .

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

Dagiti makasungbat a utilidad

Inayon ti responsiveboolean tapno mangpataud kadagiti sumungbat a utilidad (kas pagarigan, .opacity-md-25) iti ballasiw dagiti amin a breakpoint .

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

Rimmuar: .

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

Panagbalbaliw kadagiti utilidad

I-override dagiti addan a utilidad babaen ti panagusar ti isu met laeng a tulbek. Kas pagarigan, no kayatmo dagiti kanayonan a responsive overflow utility classes, mabalinmo nga aramiden daytoy:

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

Dagiti utilidad ti panagimprenta

Ti panangipalubos ti printpagpilian ket mangpataud pay kadagiti klase ti utilidad para iti panagimaldit, a maipakat laeng iti uneg ti @media print { ... }panagsaludsod ti media.

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

Rimmuar: .

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

Kinapateg

Amin a utilidad a pinartuat babaen ti API ket mairaman !importanttapno masigurado a mangbalbaliwda kadagiti paset ken dagiti klase ti mangbalbaliw a kas nairanta. Mabalinmo nga i-toggle daytoy a panagitunos iti sangalubongan babaen ti $enable-important-utilitiesvariable (default iti true).

Babaen ti panangusar iti API

Ita ta pamiliarkan no kasano ti panagandar ti utilities API, sursuruem no kasano ti manginayon kadagiti bukodmo a kostumbre a klase ken baliwam dagiti default a utilidadmi.

Inayon dagiti utilidad

Dagiti baro a utilidad ket mabalin a mainayon iti default $utilitiesa mapa babaen ti map-merge. Siguraduen dagiti kasapulanmi a Sass files ken _utilities.scssmai-import nga umuna, kalpasanna usarem ti map-mergetapno mainayon dagiti kanayonan a utilidadmo. Kas pagarigan, ditoy no kasano ti manginayon ti responsive cursorutility nga addaan iti tallo a pateg.

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

Baliwan dagiti utilidad

Baliwan dagiti addan a utilidad iti default $utilitiesa mapa nga addaan map-getken map-mergedagiti panagandar. Iti pagarigan iti baba, manginayonkami iti kanayonan a pateg kadagiti widthutilidad. Mangrugi iti umuna map-mergeken kalpasanna ikeddeng no ania a utilidad ti kayatmo a baliwan. Manipud sadiay, alaen ti naisanglad "width"a mapa nga addaan map-gettapno makastrek ken baliwan dagiti pagpilian ken pateg ti utilidad.

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

Pagbalinen a makasungbat

Mabalinmo nga ipalubos dagiti sumungsungbat a klase para iti addan a grupo dagiti utilidad a saan nga agdama a sumungsungbat babaen ti default. Kas pagarigan, tapno agbalin a bordermakasungbat dagiti klase:

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

Daytoy ket mangpataudto itan kadagiti sumungbat a panagduduma ti .borderken .border-0para iti tunggal maysa a breakpoint. Ti napataudmo a CSS ket kastoy ti langana:

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

Baliwan ti nagan dagiti utilidad

Awan dagiti utilidad ti v4, wenno nairuam iti sabali a konbension ti panagnagan? Ti API dagiti utilidad ket mabalin a mausar a mangbalbaliw ti nagbanagan classti naited a utilidad—kas pagarigan, tapno baliwan ti nagan .ms-*dagiti utilidad iti daan .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 ),
    ),
  )
);

Ikkaten dagiti utilidad

Ikkaten ti ania man kadagiti default a utilidad babaen ti panangisaad ti tulbek ti grupo iti null. Kas pagarigan, tapno maikkat amin a widthutilities-tayo, mangaramid iti a $utilities map-mergeken mangnayon "width": nulliti uneg.

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

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

Ikkaten ti utilidad iti RTL

Dadduma a kaso ti igid ket mangaramid ti RTL nga estilo a narigat , a kas dagiti panagburak ti linia iti Arabiko. Isu a dagiti utilidad ket mabalin a maibaba manipud iti RTL a rimmuar babaen ti panangisaad ti rtlpagpilian iti false:

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

Rimmuar: .

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

Daytoy ket saan a mangiruar ti ania man iti RTL, gapu ti direktiba ti panagtengngel ti RTLCSSremove .