Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
in English

I-Utility API

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

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 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 nullisetshenziswa njengokhiye wemephu, ayihlanganiswa.
class Ongakukhetha Okuguquguqukayo kwegama lekilasi uma ungafuni ukuthi lifane nesakhiwo. Uma kwenzeka unganikezi classukhiye futhi propertyukhiye kuwuchungechunge lwezintambo, igama lekilasi lizoba into yokuqala yamalungu propertyafanayo.
state Ongakukhetha Uhlu lwezinhlobonhlobo zesigaba-mbumbulu ezifana :hovernoma :focusezizokhiqizwa insiza. Alikho inani elizenzakalelayo.
responsive Ongakukhetha I-Boolean ekhombisa uma amakilasi asabelayo adinga ukwenziwa. falsengephutha.
rfs Ongakukhetha I-boolean ukuze unike amandla ukuncishiswa koketshezi. Bheka ikhasi le- RFS ukuze uthole ukuthi lokhu kusebenza kanjani. falsengephutha.
print Ongakukhetha I-Boolean ekhombisa uma amakilasi okuphrinta adinga ukwenziwa. falsengephutha.
rtl Ongakukhetha I-Boolean ekhombisa ukuthi ukusetshenziswa kufanele kugcinwe ku-RTL. truengephutha.

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

Isiqalo sekilasi langokwezifiso

Sebenzisa classinketho ukuze uguqule isiqalo sekilasi esisetshenziswe ku-CSS ehlanganisiwe:

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

Okukhiphayo:

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

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 lwezifundazwe oluhlukaniswe isikhala: 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; }

Izinsiza ezisabelayo

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

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

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.

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 .