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	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	Ukuguquguquka kwegama leklasi ukuba awufuni ukuba lifane nepropati. Kwimeko apho unganikezeli `class`isitshixo kunye `property`nesitshixo luluhlu lweentambo, igama leklasi liya kuba yinto yokuqala `property`yoluhlu.
`state`	Ukhetho	Uluhlu lweentlobo ezahlukeneyo zodidi olungelulo oluthanda `:hover`okanye `:focus`olusenzelwa usetyenziso. Akukho xabiso lisisiseko.
`responsive`	Ukhetho	I-Boolean ebonisa ukuba iiklasi eziphendulayo kufuneka ziveliswe. `false`ngokuzenzekela.
`rfs`	Ukhetho	I-Boolean ukwenza ukuncitshiswa kolwelo. Jonga kwiphepha le- RFS ukufumanisa ukuba oku kusebenza njani. `false`ngokuzenzekela.
`print`	Ukhetho	I-Boolean ebonisa ukuba iiklasi zoshicilelo kufuneka zenziwe. `false`ngokuzenzekela.
`rtl`	Ukhetho	I-Boolean ebonisa ukuba usetyenziso kufuneka lugcinwe kwi-RTL. `true`ngokuzenzekela.

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

Isimaphambili sodidi olulungiselelweyo

Sebenzisa classukhetho ukutshintsha isimaphambili seklasi esisetyenziswe kwiCSS eqokelelweyo:

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

Isiphumo:

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

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

Izixhobo eziphendulayo

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

Ukutshintsha izixhobo

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

Shicilela izinto eziluncedo

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.

Yongeza izinto eziluncedo

Izinto ezintsha eziluncedo zingongezwa $utilitieskwimephu ehlala ikho nge map-merge. Qinisekisa ukuba iifayile zethu ezifunekayo ze-Sass kwaye _utilities.scsszingeniswe 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 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/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 .