Utility API

Usetyenziso lwe-API sisixhobo esisekwe kwi-Sass ukuvelisa iiklasi eziluncedo.

Kweli phepha

Izinto ze-Bootstrap zenziwe nge-API yethu eluncedo kwaye ingasetyenziselwa ukuguqula okanye ukwandisa iseti yethu engagqibekanga yeeklasi eziluncedo nge-Sass. Usetyenziso lwethu lwe-API lusekwe kuthotho lweemephu ze-Sass kunye nemisebenzi yokuvelisa iintsapho zeeklasi ezinokhetho ezahlukeneyo. Ukuba awuqhelananga neemephu zakwaSass, funda kumaxwebhu asemthethweni akwaSass ukuze uqalise.

Imephu $utilitiesiqulathe zonke izinto eziluncedo kwaye kamva idityaniswe $utilitiesnemephu yakho yesiko, ukuba ikhona. Imephu yosetyenziso iqulathe uluhlu olunesitshixo lwamaqela aluncedo amkela olu khetho lulandelayo:

Ukhetho	Uhlobo	Ixabiso elimiselweyo	Inkcazo
`property`	Kufuneka	-	Igama lepropati, oku kunokuba ngumtya okanye uluhlu lweentambo (umzekelo, iipadi ezithe tye okanye imida).
`values`	Kufuneka	-	Uluhlu lwamaxabiso, okanye imephu ukuba awufuni ukuba igama leklasi lifane nexabiso. Ukuba `null`isetyenziswe njengeqhosha lemephu, aliqulunqwa.
`class`	Ukhetho	null	Igama leklasi eyenziweyo. Ukuba ayibonelelwanga kwaye `property`luludwe lweentambo, `class`ingagqibekanga kwinto yokuqala `property`yoluhlu.
`css-var`	Ukhetho	`false`	I-Boolean ukuvelisa i-CSS variables endaweni yemithetho yeCSS.
`local-vars`	Ukhetho	null	Imephu yeenguqu ze-CSS zendawo ukuvelisa ukongeza kwimithetho yeCSS.
`state`	Ukhetho	null	Uluhlu lweentlobo ezahlukeneyo zodidi (umzekelo, `:hover`okanye `:focus`) ukuvelisa.
`responsive`	Ukhetho	`false`	I-Boolean ebonisa ukuba iiklasi eziphendulayo kufuneka ziveliswe.
`rfs`	Ukhetho	`false`	I-Boolean ukwenza ukuncinwa kwamanzi nge-RFS .
`print`	Ukhetho	`false`	I-Boolean ebonisa ukuba iiklasi zoshicilelo kufuneka zenziwe.
`rtl`	Ukhetho	`true`	I-Boolean ebonisa ukuba usetyenziso kufuneka lugcinwe kwi-RTL.

I-API icacisile

Zonke izinto eziguquguqukayo zongezwa $utilitieskuguquguquko ngaphakathi kwecwecwe lethu _utilities.scsslesimbo. Iqela ngalinye lezinto eziluncedo lijongeka ngolu hlobo:

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

Evelisa oku kulandelayo:

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

Ipropati

Isitshixo esifunekayo propertykufuneka simiselwe kuyo nayiphi na into eluncedo, kwaye kufuneka siqulathe ipropathi esebenzayo yeCSS. Le propati isetyenziswa kumgaqo wosetyenziso owenziweyo. Xa classisitshixo sicinyiwe, sikwasebenza njengegama lodidi olungagqibekanga. Qwalasela text-decorationusetyenziso:

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

Isiphumo:

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

Imilinganiselo

Sebenzisa valuesisitshixo ukucacisa ukuba ngawaphi amaxabiso achaziweyo propertyekufuneka asetyenziswe kumagama eklasi eyenziweyo kunye nemithetho. Inokuba luluhlu okanye imephu (iseti kwizinto eziluncedo okanye kwi-variable ye-Sass).

Njengoluhlu, njengakwizinto text-decorationeziluncedo :

values: none underline line-through

Njengemephu, njengezinto opacityeziluncedo :

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

Njengotshintsho lweSass oluseta uluhlu okanye imephu, njengakwizinto zethu positioneziluncedo :

values: $position-values

Iklasi

Sebenzisa classukhetho ukutshintsha isimaphambili seklasi esisetyenziswe kwiCSS eqokelelweyo. Umzekelo, ukutshintsha ukusuka .opacity-*ku .o-*:

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

Isiphumo:

.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 eziluncedo eziguquguqukayo

Cwangcisa css-varukhetho lwe boolean ukuya truekunye ne API izakuvelisa yasekuhlaleni iinguqu ze CSS kumkhethi onikiweyo endaweni yemithetho yesiqhelo property: value. Qwalasela .text-opacity-*izixhobo zethu:

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

Isiphumo:

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

Iinguqu ze-CSS zasekuhlaleni

Sebenzisa local-varsukhetho ukukhankanya imephu ye-Sass eya kuvelisa iinguqu ze-CSS zasekuhlaleni ngaphakathi kweseti yomgaqo weklasi yoncedo. Nceda uqaphele ukuba kunokufuna umsebenzi owongezelelweyo ukusebenzisa ezo ziguquguquko zeCSS zendawo kwimigaqo yeCSS eyenziwe. Umzekelo, qwalasela izixhobo zethu .bg-*eziluncedo:

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

Isiphumo:

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

States

Sebenzisa stateukhetho ukuvelisa iiyantlukwano zodidi losinga. Umzekelo pseudo-class are :hoverand :focus. Xa uluhlu lwamazwe lunikiwe, amagama eklasi aye asenzelwa olo didi lwe-pseudo-class. Umzekelo, ukutshintsha i-opacity kwi-hover, yongeza state: hoverkwaye uya .opacity-hover:hoverkungena kwi-CSS yakho ehlanganisiweyo.

Ngaba ufuna iiklasi zobuxoki ezininzi? Sebenzisa uluhlu olwahlukileyo lweendawo: state: hover focus.

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

Isiphumo:

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

Ukusabela

Yongeza i- responsiveboolean ukwenza izinto eziluncedo eziphendulayo (umzekelo, .opacity-md-25) kuzo zonke iindawo zokuqhawula .

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

Isiphumo:

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

Shicilela

Ukwenza printukhetho kuyakuvelisa kwakhona iiklasi eziluncedo zoshicilelo, ezisetyenziswa kuphela ngaphakathi @media print { ... }kombuzo wemidiya.

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

Isiphumo:

.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 izinto eziluncedo ezenziwe yi-API zibandakanya !importantukuqinisekisa ukuba ziyawahoxisa amacandelo kunye neeklasi zohlengahlengiso njengoko kucetyiwe. Ungaqhobosha olu seto jikelele $enable-important-utilitiesngoguqulo (olumiselweyo ukuya true).

Ukusebenzisa i-API

Ngoku uqhelene nendlela esebenza ngayo i-API, funda indlela yokongeza iiklasi zakho zesiko kwaye ulungise izixhobo zethu ezingagqibekanga.

Susa izinto eziluncedo

Bhala ngaphezulu kwezinto ezikhoyo ngokusebenzisa iqhosha elifanayo. Umzekelo, ukuba ufuna iiklasi ezongezelelweyo ezisebenzayo eziphendulayo, unokwenza oku:

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

Yongeza izinto eziluncedo

Izinto ezintsha eziluncedo zingongezwa $utilitieskwimephu ehlala ikho nge map-merge. Qinisekisa ukuba iifayile zethu ezifunekayo ze-Sass kwaye _utilities.scsszithathwa ngaphandle kuqala, emva koko usebenzise map-mergeukongeza izinto zakho eziluncedo. Umzekelo, nantsi indlela yokongeza into cursoreluncedo ephendulayo enamaxabiso 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,
    )
  )
);

Guqula izinto eziluncedo

Guqula izinto eziluncedo ezikhoyo $utilitieskwimephu engagqibekanga kunye map-getnemisebenzi map-merge. Kulo mzekelo ungezantsi, songeza ixabiso elongezelelweyo kwizinto widtheziluncedo. Qala ngesiqalo map-mergekwaye uchaze ukuba yeyiphi into eluncedo ofuna ukuyilungisa. Ukusuka apho, landa "width"imephu ebekwe kwindlwane map-getukuze ufikelele kwaye ulungise izinto onokukhetha kuzo kunye namaxabiso.

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

Yenza ukuphendula

Unokwenza iiklasi eziphendulayo kwiseti ekhoyo yezinto eziluncedo ezingaphenduliyo ngoku ngokungagqibekanga. Umzekelo, ukwenza borderiiklasi ziphendule:

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

Oku ngoku kuya kuvelisa iiyantlukwano eziphendulayo .borderkunye nendawo .border-0nganye yoqhawulo. I-CSS yakho eyenziweyo iya kujongeka ngolu hlobo:

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

Thiya ngokutsha izinto eziluncedo

Ezilahlekileyo ze-v4 eziluncedo, okanye ezisetyenziselwa enye indibano yamagama? Izinto eziluncedo ze-API zingasetyenziselwa ukubhala ngaphezulu isiphumo sento classeluncedo enikiweyo-umzekelo, ukuqamba ngokutsha .ms-*izinto eziluncedo ukuba 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 izinto eziluncedo

Susa naziphi na izinto ezingagqibekanga ngokuseta iqhosha leqela ku null. Umzekelo, ukususa zonke izinto zethu widtheziluncedo, yenza i a $utilities map-mergekwaye wongeze "width": nullngaphakathi.

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

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

Susa into eluncedo kwi-RTL

Ezinye iimeko zomphetho zenza isitayile se- RTL sibe nzima , njengokuqhawulwa kwemigca kwisiArabhu. Ngaloo ndlela izinto eziluncedo zinokuwiswa kwimveliso ye-RTL ngokucwangcisa rtlukhetho ku false:

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

Isiphumo:

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

Oku akuvelisi nto kwi-RTL, enkosi kumyalelo wolawulo we-RTLCSSremove .