I-Utility API

I-Utility API iyithuluzi elisekelwe kwa-Sass lokukhiqiza amakilasi osizo.

Kuleli khasi

Izinsiza ze-Bootstrap zenziwa nge-API yethu yokusetshenziswa futhi zingasetshenziselwa ukuguqula noma ukunweba isethi yethu ezenzakalelayo yamakilasi okusetshenziswayo nge-Sass. I-API yethu yokusetshenziswa isekelwe ochungechungeni lwamamephu we-Sass nemisebenzi yokukhiqiza imindeni yamakilasi ngezinketho ezihlukahlukene. Uma ungawazi amamephu akwa-Sass, funda kumadokhumenti e- Sass asemthethweni ukuze uqalise.

Imephu $utilitiesiqukethe zonke izinsiza zethu futhi kamuva ihlanganiswa $utilitiesnemephu yakho yangokwezifiso, uma ikhona. Imephu yokusetshenziswa iqukethe uhlu olunokhiye lwamaqembu asetshenziswayo amukela izinketho ezilandelayo:

Inketho	Uhlobo	Inani elizenzakalelayo	Incazelo
`property`	Kudingeka	-	Igama lesakhiwo, lokhu kungaba iyunithi yezinhlamvu noma uchungechunge lwezintambo (isb., amaphedi avundlile noma amamajini).
`values`	Kudingeka	-	Uhlu lwamanani, noma imephu uma ungafuni ukuthi igama lekilasi lifane nevelu. Uma `null`isetshenziswa njengokhiye wemephu, ayihlanganiswa.
`class`	Ongakukhetha	null	Igama lekilasi elakhiwe. Uma inganikeziwe futhi `property`kuwuchungechunge lweyunithi yezinhlamvu, `class`izozenzakalela ibe yisici sokuqala samalungu `property`afanayo.
`css-var`	Ongakukhetha	`false`	I-Boolean ukukhiqiza okuguquguqukayo kwe-CSS esikhundleni semithetho ye-CSS.
`local-vars`	Ongakukhetha	null	Imephu yezinto eziguquguqukayo zendawo ze-CSS ezizokhiqizwa ngaphezu kwemithetho ye-CSS.
`state`	Ongakukhetha	null	Uhlu lwezinhlobonhlobo zesigaba-mbumbulu (isb, `:hover`noma `:focus`) okumelwe zenziwe.
`responsive`	Ongakukhetha	`false`	I-Boolean ekhombisa uma amakilasi asabelayo kufanele enziwe.
`rfs`	Ongakukhetha	`false`	I-Boolean ukuze unike amandla ukukala kabusha koketshezi nge-RFS .
`print`	Ongakukhetha	`false`	I-Boolean ekhombisa uma amakilasi okuphrinta adinga ukwenziwa.
`rtl`	Ongakukhetha	`true`	I-Boolean ekhombisa ukuthi ukusetshenziswa kufanele kugcinwe ku-RTL.

I-API yachaza

Zonke izinto eziguquguqukayo zengezwa $utilitieskokuguquguqukayo ngaphakathi kweshidi lethu _utilities.scsslesitayela. Iqembu ngalinye lezinsiza libukeka kanje:

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

Okukhipha okulandelayo:

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

Impahla

Ukhiye odingekayo propertykufanele usethelwe noma iyiphi insiza, futhi kufanele uqukathe isakhiwo esivumelekile se-CSS. Lesi sici sisetshenziswa kusethi yemithetho yensiza ekhiqiziwe. Uma classukhiye ukhishiwe, uphinda usebenze njengegama lekilasi elimisiwe. Cabangela text-decorationinsiza:

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

Okukhiphayo:

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

Amanani

Sebenzisa valuesukhiye ukuze ucacise ukuthi imaphi amanani ashiwo propertyokufanele asetshenziswe kumagama ekilasi akhiqiziwe nemithetho. Kungaba uhlu noma imephu (esethwe ezintweni ezisetshenziswayo noma kokuguquguqukayo kwe-Sass).

Njengohlu, text-decorationnjengezinsiza :

values: none underline line-through

Njengemephu, opacitynjengezinsiza :

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

Njengokuguquguquka kwe-Sass osetha uhlu noma imephu, njengakuzinsiza positionzethu :

values: $position-values

Ikilasi

Sebenzisa classinketho ukuze uguqule isiqalo sekilasi esisetshenziswe ku-CSS ehlanganisiwe. Isibonelo, ukushintsha kusuka .opacity-*ku- .o-*:

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

Okukhiphayo:

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

Izinsiza eziguquguqukayo ze-CSS

Setha css-varinketho ye-boolean truefuthi i-API izokhiqiza okuguquguqukayo kwasendaweni kwe-CSS yesikhethi esinikeziwe esikhundleni property: valuesemithetho evamile. Cabangela .text-opacity-*izinsiza zethu:

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

Okukhiphayo:

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

Okuguquguqukayo kwendawo ye-CSS

Sebenzisa local-varsinketho ukuze ucacise imephu ye-Sass ezokhiqiza okuguquguqukayo kwasendaweni kwe-CSS ngaphakathi kwesethi yemithetho yesigaba sosizo. Sicela uqaphele ukuthi kungase kudinge umsebenzi owengeziwe ukuze usebenzise lezo ziguquguqukayo zendawo ze-CSS emithethweni ekhiqiziwe ye-CSS. Isibonelo, cabanga .bg-*ngezinsiza zethu:

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

Okukhiphayo:

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

Amazwe

Sebenzisa stateinketho ukuze ukhiqize ukuhluka kwesigaba-mbumbulu. Izibonelo zamakilasi mbumbulu yilezi :hoverkanye :focus. Uma uhlu lwezifunda lunikezwa, amagama ekilasi adalelwa leso sigaba-mbumbulu. Isibonelo, ukuze uguqule ukukhanya ku-hambisa phezulu, engeza state: hoverfuthi uzongena .opacity-hover:hoverku-CSS yakho ehlanganisiwe.

Udinga amakilasi-mbumbulu amaningi? Sebenzisa uhlu oluhlukaniswe isikhala lwezifunda: state: hover focus.

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

Okukhiphayo:

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

Iyasabela

Engeza i- responsiveboolean ukuze ukhiqize izinsiza ezisabelayo (isb, .opacity-md-25) kuwo wonke ama-breakpoint .

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

Okukhiphayo:

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

Phrinta

Ukunika amandla printinketho kuzophinda kukhiqize amakilasi ezinsiza zokuphrinta, asetshenziswa kuphela ngaphakathi @media print { ... }kombuzo wemidiya.

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

Okukhiphayo:

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

Ukubaluleka

Zonke izinsiza ezikhiqizwe i-API zifaka phakathi !importantukuqinisekisa ukuthi zibhala ngaphezulu izingxenye namakilasi okulungisa njengoba kuhlosiwe. Ungakwazi ukuguqula lesi silungiselelo emhlabeni jikelele ngokushintshashintsha $enable-important-utilities(okuzenzakalelayo kuye kokuthi true).

Ukusebenzisa i-API

Manje njengoba usuyazi ukuthi i-API yezinsiza isebenza kanjani, funda ukuthi ungangeza kanjani amakilasi akho angokwezifiso futhi ulungise izinsiza zethu ezizenzakalelayo.

Khipha izinsiza

Khipha izinsiza ezikhona ngokusebenzisa ukhiye ofanayo. Isibonelo, uma ufuna amakilasi ezinsiza ezengeziwe eziphendulayo, ungenza lokhu:

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

Engeza izinsiza

Izinsiza ezintsha zingangezwa $utilitieskumephu ezenzakalelayo nge- map-merge. Qiniseka ukuthi amafayela ethu adingekayo akwa-Sass futhi _utilities.scssangeniswa kuqala, bese usebenzisa map-mergeukungeza izinsiza zakho ezengeziwe. Isibonelo, nansi indlela yokwengeza cursorinsiza ephendulayo enamanani amathathu.

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

Shintsha izinsiza

Lungisa izinsiza ezikhona $utilitieskumephu ezenzakalelayo map-getkanye map-mergenemisebenzi. Esibonelweni esingezansi, sengeza inani elingeziwe widthkuzinsiza. Qala nge-initial map-mergebese usho ukuthi iyiphi insiza ofuna ukuyishintsha. Kusuka lapho, landa "width"imephu ebekwe esidlekeni map-getukuze ufinyelele futhi ulungise izinketho namanani ensiza.

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

Nika amandla ukuphendula

Unganika amandla amakilasi asabelayo kusethi ekhona yezinsiza okwamanje ezingasabeli ngokuzenzakalela. Isibonelo, ukwenza borderamakilasi aphendule:

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

Lokhu manje kuzodala ukuhlukahluka okusabelayo kwephuzu .borderngalinye .border-0lokuhlukana. I-CSS yakho ekhiqiziwe izobukeka kanje:

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

Qamba kabusha izinsiza

Izinsiza ze-v4 ezingekho, noma ezijwayele ukuqamba amagama? Izinsiza ze-API zingasetshenziselwa ukubhala ngaphezulu umphumela classwokusetshenziswa okunikeziwe—ngokwesibonelo, ukuqamba kabusha .ms-*izinsiza ziye ku-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 ),
    ),
  )
);

Susa izinsiza

Susa noma yiziphi izinsiza ezizenzakalelayo ngokusetha ukhiye weqembu ku- null. Isibonelo, ukususa zonke widthizinsiza zethu, dala $utilities map-mergefuthi wengeze "width": nullngaphakathi.

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

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

Susa isisetshenziswa ku-RTL

Amanye amakesi onqenqema enza isitayela se-RTL sibe nzima , njengokunqamuka kwemigqa ngesi-Arabhu. Ngakho izinsiza zingehliswa ekuphumeni kwe-RTL ngokusetha rtlinketho kokuthi false:

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

Okukhiphayo:

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

Lokhu akukhiphi lutho ku-RTL, ngenxa yomyalelo wokulawula we-RTLCSSremove .