Dɔwɔnu ƒe API

Dɔwɔnu API nye dɔwɔnu si wotu ɖe Sass dzi tsɔ wɔa dɔwɔnu ƒe hatsotsowo.

Le axa sia dzi

Wowɔa Bootstrap dɔwɔnuwo kple míaƒe dɔwɔnu API eye woateŋu azãe atsɔ atrɔ asi le alo akeke míaƒe dɔwɔnu ƒe hatsotso siwo woɖo ɖi la ɖe enu to Sass dzi. Míaƒe utility API nɔ te ɖe Sass anyigbatatawo kple dɔwɔwɔwo ƒe ƒuƒoƒo dzi hena ƒomewo ƒe klasswo wɔwɔ kple tiatia vovovowo. Ne mènya nu tso Sass ƒe anyigbatatawo ŋu o la, xlẽ nu yi dzi le Sass ƒe nuŋlɔɖi siwo dziɖuɖua ɖo la dzi be nàdze egɔme.

Míaƒe $utilitiesdɔwɔnuwo katã le anyigbatataa dzi eye emegbe wotsɔa wo tsakana kple wò $utilitiesanyigbatata si nèwɔ ɖe ɖoɖo nu, ne ele eme. Dɔwɔnu ƒe nɔnɔmetata la me nuwo ƒe ƒuƒoƒo siwo xɔ tiatia siwo gbɔna la ƒe xexlẽdzesi si ŋu safui le:

Tiatia	Ƒomevi	Asixɔxɔ si woɖo ɖi	Nuɖᴐɖᴐ
`property`	Si hiã	– .	Ŋkɔ na nɔnɔme, esia ateŋu anye ka alo ka ƒe ƒuƒoƒo (le kpɔɖeŋu me, horizontal paddings alo margins).
`values`	Si hiã	– .	Ŋlɔ asixɔxɔwo, alo anyigbatata ne mèdi be klass ƒe ŋkɔ nasɔ kple asixɔxɔa o. Ne `null`wozãe abe anyigbatata ƒe safui ene la, womeƒoe nu ƒu o.
`class`	Le tiatia me	ƒuƒlu	Klass si wowɔ la ƒe ŋkɔ. Ne wometsɔe na o eye `property`wònye ka ƒe ƒuƒoƒo la, `class`anye default na ƒuƒoƒoa ƒe akpa gbãtɔ `property`.
`css-var`	Le tiatia me	`false`	Boolean be woawɔ CSS tɔtrɔwo ɖe CSS sewo teƒe.
`local-vars`	Le tiatia me	ƒuƒlu	Map of local CSS variables be woawɔ kpe ɖe CSS sewo ŋu.
`state`	Le tiatia me	ƒuƒlu	Ŋlɔ pseudo-klas ƒe tɔtrɔwo (le kpɔɖeŋu me, `:hover`alo `:focus`) be woawɔ.
`responsive`	Le tiatia me	`false`	Boolean si fia nenye be ele be woawɔ klass siwo ɖoa nya ŋu.
`rfs`	Le tiatia me	`false`	Boolean be wòana tsi ƒe gbugbɔgaɖɔɖo nawɔ dɔ kple RFS .
`print`	Le tiatia me	`false`	Boolean si fia nenye be ehiã be woawɔ agbalẽtata ƒe klasswo.
`rtl`	Le tiatia me	`true`	Boolean si fia nenye be ele be woadzra utility ɖo ɖe RTL me.

API ɖe eme

Wotsɔa utility variables katã kpena ɖe $utilitiesvariable la ŋu le míaƒe _utilities.scssstylesheet me. Dɔwɔƒewo ƒe ƒuƒoƒo ɖesiaɖe ƒe dzedzeme le abe esia ene:

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

Nusi ɖea nusiwo gbɔna doa goe:

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

Nunᴐamesi

Ele be woaɖo safui si wobia propertyla na dɔwɔnu ɖesiaɖe, eye ele be CSS ƒe nɔnɔme si sɔ nanɔ eme. Wozãa nɔnɔme sia le dɔwɔnu si wowɔ ƒe sewo me. Ne woɖe classsafuia ɖa la, egawɔa dɔ abe klass ŋkɔ si woɖo ɖi ene. Bu text-decorationviɖe si le eŋu ŋu kpɔ:

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

Nusiwo do tso eme:

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

Dzidzenuwo

Zã valuessafuia nàtsɔ agblɔ asixɔxɔ siwo propertywòle be woazã na si woɖo la le klass ŋkɔwo kple se siwo wowɔ me. Ateŋu anye xexlẽdzesi alo anyigbatata (si woɖo ɖe dɔwɔnuwo me alo le Sass ƒe tɔtrɔ me).

Abe xexlẽdzesi ene la, abe alesi wòle le text-decorationutilities gome ene :

values: none underline line-through

Abe anyigbatata ene la, abe alesi wòle le opacitynuzazãwo gome ene :

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

Abe Sass ƒe tɔtrɔ si ɖoa xexlẽdzesi alo anyigbatata ene, abe alesi wòle le míaƒe positiondɔwɔnuwo me ene :

values: $position-values

Nusrɔ̃ƒe

Zã classtiatia la nàtsɔ atrɔ klass ƒe ŋgɔdonya si wozã le CSS si woƒo ƒu me. Le kpɔɖeŋu me, ne èdi be yeatrɔ tso .opacity-*ayi .o-*:

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

Nusiwo do tso eme:

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

CSS ƒe tɔtrɔ ƒe dɔwɔnuwo

Ðo css-varboolean tiatia la ɖe trueeye API la awɔ teƒea ƒe CSS tɔtrɔwo na tiatiawɔla si wona ɖe property: valuese siwo wozãna ɖaa teƒe. Bu míaƒe .text-opacity-*nuzazãwo ŋu kpɔ:

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

Nusiwo do tso eme:

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

Nutoa me CSS ƒe tɔtrɔwo

Zã local-varstiatia la nàtsɔ agblɔ Sass ƒe anyigbatata si awɔ teƒea ƒe CSS tɔtrɔwo le dɔwɔnu ƒe hatsotso ƒe sewo me. Taflatse de dzesii be ateŋu abia dɔ bubuwo be woaɖu nutoa me CSS tɔtrɔ mawo le CSS se siwo wowɔ me. Le kpɔɖeŋu me, bu míaƒe .bg-*nuzazãwo ŋu kpɔ:

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

Nusiwo do tso eme:

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

Dukɔwo

Zã statetiatia la nàtsɔ awɔ aʋatso-klas ƒe tɔtrɔwo. Kpɔɖeŋu aʋatso-klaswoe nye :hoverkple :focus. Ne wotsɔ dukɔwo ƒe xexlẽdzesiwo na la, wowɔa klass ŋkɔwo na alakpa-klas ma. Le kpɔɖeŋu me, be nàtrɔ opacity le hover dzi la, tsɔ kpe ɖe eŋu state: hovereye àge .opacity-hover:hoverɖe wò CSS si nèƒo ƒu la me.

Èhiã aʋatso-klass geɖea? Zã nɔnɔmewo ƒe xexlẽdzesi si woma ɖe dometsotso me: state: hover focus.

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

Nusiwo do tso eme:

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

Nyaŋuɖoɖo

Tsɔ responsiveboolean kpe ɖe eŋu be nàwɔ dɔwɔnu siwo ɖoa nya ŋu (le kpɔɖeŋu me, .opacity-md-25) le breakpoints katã me .

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

Nusiwo do tso eme:

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

Ta agbalẽa

Tiatia printla ƒe dɔwɔwɔ ana dɔwɔnu ƒe hatsotsowo hã nava na tata, siwo wozãna le @media print { ... }nyadzɔdzɔgblɔmɔnuwo ƒe biabiaa me ko.

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

Nusiwo do tso eme:

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

Vevienyenye

Dɔwɔnu siwo katã API wɔ la dometɔ aɖewoe nye !importantbe woakpɔ egbɔ be woɖe akpawo kple tɔtrɔ ƒe hatsotsowo ɖa abe alesi woɖoe ene. Àteŋu atrɔ ɖoɖo sia le xexeame katã kple $enable-important-utilitiestɔtrɔ (defaults to true).

API la zazã

Fifia si nènya alesi utilities API wɔa dɔe nyuie la, srɔ̃ alesi nàtsɔ wò ŋutɔ wò custom classes akpe ɖe eŋu eye nàtrɔ asi le míaƒe utilities default ŋu.

Ðe asi le dɔwɔnu siwo wozãna ŋu

Trɔ asi le dɔwɔnu siwo li xoxo ŋu to safui ma ke zazã me. Le kpɔɖeŋu me, ne èdi be yeawɔ responsive overflow utility class bubuwo la, àte ŋu awɔ esia:

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

Tsɔ dɔwɔnu siwo wozãna tsɔ kpe ɖe eŋu

Woate ŋu atsɔ dɔwɔnu yeyewo akpe ɖe $utilitiesanyigbatata si woɖo ɖi ŋu kple map-merge. Kpɔ egbɔ be míaƒe Sass faɛl siwo hiã eye _utilities.scsswotsɔ wo va gbã, emegbe zã la map-mergenàtsɔ atsɔ wò dɔwɔnu bubuwo akpe ɖe eŋu. Le kpɔɖeŋu me, alesi nàtsɔ ŋuɖoɖo cursorƒe dɔwɔnu si me asixɔxɔ etɔ̃ le akpe ɖe eŋue nye esi.

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

Trɔ asi le dɔwɔnu siwo wozãna ŋu

Trɔ asi le dɔwɔnu siwo li fifia ŋu le $utilitiesanyigbatata si woɖo ɖi me kple map-getkple map-mergedɔwɔwɔwo. Le kpɔɖeŋu si le ete me la, míele asixɔxɔ bubu aɖe kpem ɖe widthdɔwɔnuawo ŋu. Dze egɔme kple gɔmedzedze map-mergeeye emegbe nàgblɔ dɔwɔnu si nèdi be yeatrɔ asi le. Tso afima la, tsɔ nested "width"map la kple map-getbe nàge ɖe utility la ƒe tiatia kple asixɔxɔwo me ahatrɔ asi le wo ŋu.

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

Na ŋuɖoɖo nawɔ dɔ

Àteŋu ana ŋuɖoɖo ƒe klasswo nawɔ dɔ na dɔwɔnu siwo li xoxo siwo mewɔa dɔ fifia le gɔmedzedzea me o. Le kpɔɖeŋu me, be nàna borderklassawo nawɔ nu ɖe ame ŋu nyuie la:

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

Esia ana woawɔ tɔtrɔ siwo ɖoa nya ŋu le .borderkple .border-0ɖe breakpoint ɖesiaɖe ŋu azɔ. Wò CSS si nèwɔ la anɔ ale:

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

Trɔ ŋkɔ na dɔwɔnu siwo wozãna

V4 utilities bu, alo zã ŋkɔyɔyɔ ƒe ɖoɖo bubua? Woateŋu azã utilities API atsɔ axe mɔ ɖe classutility si wona ƒe emetsonua nu—le kpɔɖeŋu me, be woatrɔ ŋkɔ .ms-*utilities ɖe oldish .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 ),
    ),
  )
);

Ðe nuzazãwo ɖa

Ðe dɔwɔnu siwo woɖo ɖi la dometɔ aɖe ɖa to ƒuƒoƒo ƒe safuia ɖoɖo ɖe null. Le kpɔɖeŋu me, be nàɖe míaƒe widthdɔwɔnuwo katã ɖa la, wɔ a $utilities map-mergeeye nàtsɔ wo akpe ɖe eŋu "width": null.

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

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

Ɖe utility ɖa le RTL me

Edge case aɖewo na RTL styling sesẽ , abe fli ƒe gbagbã le Arabgbe me ene. Ale woateŋu aɖe dɔwɔnuwo ɖa le RTL ƒe dodo me to rtltiatiawɔwɔa ɖoɖo ɖe false:

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

Nusiwo do tso eme:

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

Esia meɖea naneke doa goe le RTL me o, akpe na RTLCSS removeƒe dziɖuɖu ƒe mɔfiame .