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	Default nga pateg	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	nawaswas	Nagan ti napataud a klase. No saan a naited ken `property`maysa a urnos dagiti kuerdas, `class`agdefaultto iti umuna nga elemento ti `property`urnos.
`css-var`	Opsional	`false`	Boolean tapno mangpataud kadagiti variable ti CSS imbes a dagiti pagannurotan ti CSS.
`local-vars`	Opsional	nawaswas	Mapa dagiti lokal a variable ti CSS a mangpataud malaksid kadagiti pagalagadan ti CSS.
`state`	Opsional	nawaswas	Listaan dagiti pseudo-klase a variante (kas pagarigan, `:hover`wenno `:focus`) a mangpataud.
`responsive`	Opsional	`false`	Boolean a mangipakpakita no dagiti sumungsungbat a klase ket rumbeng a mapartuat.
`rfs`	Opsional	`false`	Boolean tapno mapalubosan ti panagsukat manen ti pluido babaen ti RFS .
`print`	Opsional	`false`	Boolean a mangipakpakita no dagiti klase ti panagimaldit ket kasapulan a mapartuat.
`rtl`	Opsional	`true`	Boolean a mangipakpakita no ti utilidad ket rumbeng a maidulin iti RTL.

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

Sanikua

Ti kasapulan propertya tulbek ket masapul a maikeddeng para iti ania man a utilidad, ken daytoy ket masapul nga aglaon ti balido a tagikua ti CSS. Daytoy a tagikua ket maus-usar iti ruleset ti napataud a utilidad. No ti classtulbek ket naikkat, daytoy ket agserbi pay a kas ti default a nagan ti klase. Usigem ti text-decorationutilidad:

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

Rimmuar: .

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

Dagiti Pagalagadan

Usaren ti valuestulbek tapno mangibaga no ania dagiti pateg para kadagiti naikeddeng propertya rumbeng a mausar kadagiti napataud a nagan ti klase ken dagiti pagalagadan. Mabalin a listaan wenno mapa (naikeddeng kadagiti utilidad wenno iti maysa a Sass a variable).

Kas maysa a listaan, kas kadagiti text-decorationutilidad :

values: none underline line-through

Kas mapa, kas kadagiti opacityutilidad :

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

Kas maysa a Sass a variable a mangikeddeng ti listaan wenno mapa, a kas kadagiti positionutilidadmi :

values: $position-values

Klase

Usaren ti classpagpilian a mangbalbaliw ti prefix ti klase a naus-usar iti naurnong a CSS. Kas pagarigan, tapno agbaliw manipud .opacity-*iti aginggana iti .o-*:

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

Rimmuar: .

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

Dagiti utilidad ti variable ti CSS

Itakderan ti css-varboolean a pagpilian iti trueken ti API ket mangpataudto kadagiti lokal a CSS a variable para iti naited a mangpili imbes a dagiti kadawyan a property: valuepagalagadan. Usigenyo dagiti .text-opacity-*utilidadtayo:

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

Rimmuar: .

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

Dagiti lokal a variable ti CSS

Usaren ti local-varspagpilian tapno mangibaga ti mapa ti Sass a mangpataud kadagiti lokal a variable ti CSS iti uneg ti ruleset ti klase ti utilidad. Pangngaasi a laglagipen a mabalin a kasapulan ti kanayonan a trabaho tapno agkonsumo kadagidiay a lokal a variable ti CSS kadagiti napataud a pagalagadan ti CSS. Kas pagarigan, usigenyo dagiti .bg-*utilidadtayo:

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

Rimmuar: .

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

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

Nasungbatan

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

I-print

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.

I-override dagiti 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,
  ),
);

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 usaren 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 .