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`lisetyenziswa njengeqhosha lemephu, `class`alinikezelwanga kwigama leklasi.
`class`	Ukhetho	null	Igama leklasi eyenziweyo. Ukuba ayibonelelwanga kwaye `property`luludwe lweentambo, `class`ingagqibekanga kwinto yokuqala `property`yoluhlu. Ukuba ayibonelelwanga kwaye `property`ingumtya, `values`izitshixo zisetyenziselwa `class`amagama.
`css-var`	Ukhetho	`false`	I-Boolean ukuvelisa i-CSS variables endaweni yemithetho yeCSS.
`css-variable-name`	Ukhetho	null	Igama elimiselweyo elingamiselwanga prefixed yeCSS eguquguqukayo ngaphakathi kwesethi yomthetho.
`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 (ebekwe 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; }

Ukuba class: null, yenza iindidi zesitshixo ngasinye values:

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

Isiphumo:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !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. Yongeza into oyikhethayo css-variable-nameukuseta igama eliguquguqukayo leCSS elahlukileyo kunegama leklasi.

Qwalasela .text-opacity-*eziluncedo zethu. Ukuba songeza css-variable-nameukhetho, siya kufumana imveliso yesiko.

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

Isiphumo:

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Oku ngoku kuya kuvelisa iiyantlukwano eziphendulayo .borderkunye nendawo .border-0nganye yokwaphuka. 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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Susa izinto eziluncedo

Susa naziphi na usetyenziso olungagqibekanga ngomsebenzi map-remove()weSass .

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

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

Ungasebenzisa kwakhona umsebenzi map-merge()weSass kwaye usete isitshixo seqela nullukususa into eluncedo.

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

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

@import "bootstrap/scss/utilities/api";

Yongeza, susa, guqula kancinane

Unokongeza, ususe, kwaye ulungise izinto ezininzi ngaxeshanye ngomsebenzi we- map-merge()Sass . Nantsi indlela onokuthi udibanise imizekelo yangaphambili kwimephu enye enkulu.

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

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

Susa into eluncedo kwi-RTL

Ezinye iimeko edge zenza RTL isitayile nzima , ezifana ikhefu line in Arabic. 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 akuphumi nantoni na kwi-RTL, enkosi kumyalelo wolawulo we-RTLCSSremove .