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	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	Trɔtrɔ na klass ŋkɔ ne mèdi be wòanɔ abe nunɔamesi la ene o. Nenye be mèna `class`safuia o eye `property`safui nye ka ƒe ƒuƒoƒo la, klass ŋkɔ anye `property`ƒuƒoƒoa ƒe akpa gbãtɔ.
`state`	Le tiatia me	List of pseudo-class variants abe `:hover`alo `:focus`be woawɔ na utility la. Asixɔxɔ gbãtɔ aɖeke meli o.
`responsive`	Le tiatia me	Boolean si fia nenye be ehiã be woawɔ klass siwo ɖoa nya ŋu. `false`le gɔmedzedzea me.
`rfs`	Le tiatia me	Boolean be wòana tsi ƒe gbugbɔgaɖɔɖo nate ŋu adzɔ. Kpɔ RFS ƒe axaa ɖa be nànya alesi esia wɔa dɔe. `false`le gɔmedzedzea me.
`print`	Le tiatia me	Boolean si fia nenye be ehiã be woawɔ agbalẽtata ƒe klasswo. `false`le gɔmedzedzea me.
`rtl`	Le tiatia me	Boolean si fia nenye be ele be woadzra utility ɖo ɖe RTL me. `true`le gɔmedzedzea 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; }

Klas ƒe ŋgɔdonya si wowɔ ɖe ɖoɖo nu

Zã classtiatia la nàtsɔ atrɔ klass ƒe ŋgɔdonya si wozã le CSS si woƒo ƒu me:

$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; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

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ɔ nɔnɔmewo ƒ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; }

Dɔwɔnu siwo wɔa dɔ ɖe ame dzi

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

Dɔwɔnu siwo wozãna tsɔ trɔa asi le eŋ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,
  ),
);

Agbalẽtata ƒe dɔwɔnuwo

Tiatia printla ƒe dɔwɔwɔ ana dɔwɔnu ƒe hatsotsowo hã nava na tata, siwo wozãna le @media print { ... }media biabia la 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.

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ɔ "width"anyigbatata si wotsɔ ƒo ƒui la vɛ map-getbe nàge ɖe dɔwɔnua ƒe tiatiawɔnuwo 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 meɖoa nya ŋu 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 .