Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
Check
in English

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 nullmaus-usar a kas tulbek ti mapa, classsaan a nasaksakbay iti nagan ti klase.
class Opsional nawaswas Nagan ti napataud a klase. No saan a naited ken propertymaysa a urnos dagiti kuerdas, classagdefaultto iti umuna nga elemento ti propertyurnos. No saan a naited ken propertymaysa a kuerdas, dagiti valuestulbek ket maus-usar para kadagiti classnagan.
css-var Opsional false Boolean tapno mangpataud kadagiti variable ti CSS imbes a dagiti pagannurotan ti CSS.
css-variable-name Opsional nawaswas Kostumbre a saan a naipangpangruna a nagan para iti CSS a variable iti uneg ti ruleset.
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, :hoverwenno :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 nausar 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; }

No class: null, ket mangpataud kadagiti klase para iti tunggal maysa kadagiti valuestulbek:

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

Rimmuar: .

.visible { visibility: visible !important; }
.invisible { visibility: hidden !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. Manginayon ti opsional css-variable-nametapno mangikeddeng ti sabali a nagan ti variable ti CSS ngem ti nagan ti klase.

Usigenyo dagiti .text-opacity-*utilidadtayo. No inayontayo ti css-variable-namepagpilian, makagun-odtayo iti custom output.

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

Rimmuar: .

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 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 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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Pagbalinen a makasungbat

Mabalinmo a pagayatan 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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Ikkaten dagiti utilidad

Ikkaten ti ania man kadagiti default a utilidad babaen ti map-remove()panagandar ti Sass .

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

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

Mabalinmo pay nga usaren ti map-merge()Sass a panagandar ken ikeddeng ti tulbek ti grupo nulltapno maikkat ti utilidad.

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

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

@import "bootstrap/scss/utilities/api";

Inayon, ikkaten, baliwan

Mabalinmo ti manginayon, mangikkat, ken mangbalbaliw kadagiti adu a utilidad a maminsan laeng babaen ti map-merge()panagandar ti Sass . Adtoy no kasano a pagtitiponem dagiti napalabas a pagarigan iti maysa a dakdakkel a mapa.

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

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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 .