API ey’omugaso

API y’omugaso kye kimu ku bikozesebwa ebyesigamiziddwa ku Sass okukola ebika by’ebikozesebwa.

Ku muko guno

Bootstrap utilities zikolebwa ne utility API yaffe era zisobola okukozesebwa okukyusa oba okugaziya default set yaffe eya utility classes nga tuyita mu Sass. API yaffe ey’omugaso yeesigamiziddwa ku lunyiriri lwa maapu za Sass n’emirimu gy’okukola amaka ga kiraasi ezirina eby’okulonda eby’enjawulo. Bwoba tomanyi maapu za Sass, soma waggulu ku Sass docs entongole okutandika.

Maapu $utilitieserimu ebikozesebwa byaffe byonna era oluvannyuma egattibwa ne $utilitiesmaapu yo eya bulijjo, bwe kiba nga kiriwo. Maapu y’ebikozesebwa erimu olukalala lw’ebibinja by’ebikozesebwa ebiriko ebisumuluzo ebikkiriza eby’okulonda bino wammanga:

Eky'olondako	Okuwandiika	Okunnyonnyola
`property`	Etaagisa	Erinnya ly'ekintu, kino kiyinza okuba olunyiriri oba ensengeka y'ennyiriri (okugeza, horizontal paddings oba margins).
`values`	Etaagisa	Olukalala lw'emiwendo, oba maapu bw'oba toyagala linnya lya kiraasi libeere nga lye limu n'omuwendo. Bwe `null`kiba nga kikozesebwa nga ekisumuluzo kya maapu, tekikuŋŋaanyizibwa.
`class`	Kya kusalawo	Enkyukakyuka ku linnya lya kiraasi bw'oba toyagala libeere nga kye kimu n'eky'obugagga. Mu mbeera nga towa `class`kisumuluzo era `property`ekisumuluzo ye nsengeka y'ennyiriri, erinnya lya kiraasi lijja kuba elementi esooka mu `property`nsengekera.
`state`	Kya kusalawo	Olukalala lw'enjawulo za pseudo-class nga `:hover`oba `:focus`okukola ku lw'omugaso. Tewali muwendo gwa default.
`responsive`	Kya kusalawo	Boolean eraga oba kiraasi eziddamu zeetaaga okukolebwa. `false`nga bwe kibadde.
`rfs`	Kya kusalawo	Boolean okusobozesa okuddamu okupima amazzi. Laba ku mukutu gwa RFS omanye engeri kino gye kikola. `false`nga bwe kibadde.
`print`	Kya kusalawo	Boolean eraga oba kiraasi z'okukuba ebitabo zeetaaga okukolebwa. `false`nga bwe kibadde.
`rtl`	Kya kusalawo	Boolean eraga oba utility erina okukuumibwa mu RTL. `true`nga bwe kibadde.

API enyonyoddwa

Enkyukakyuka zonna ez’omugaso zigattibwa ku $utilitiesnkyukakyuka munda mu sitayiro yaffe _utilities.scss. Buli kibinja ky’ebikozesebwa kirabika ekintu nga kino:

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

Ekifulumya bino wammanga:

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

Entandikwa ya kiraasi eya custom

Kozesa classeky'okulonda okukyusa entandikwa ya kiraasi ekozesebwa mu CSS ekunganyiziddwa:

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

Ebifulumizibwa:

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

Amawanga

Kozesa stateeky'okulonda okukola enjawulo ez'ekika eky'obulimba. Eky’okulabirako pseudo-classes ze zino :hoverne :focus. Olukalala lw’embeera bwe luweebwa, amannya g’ebibiina gatondebwawo ku kiraasi eyo ey’obulimba. Okugeza, okukyusa opacity ku hover, yongera state: hoverera ojja kufuna .opacity-hover:hovermu CSS yo ekung'aanyiziddwa.

Oyagala pseudo-classes eziwera? Kozesa olukalala lw’embeera olwawuddwamu ebbanga: state: hover focus.

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

Ebifulumizibwa:

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

Ebikozesebwa ebiddamu

Okwongerako responsiveboolean okukola ebikozesebwa ebiddamu (okugeza, .opacity-md-25) okubuna breakpoints zonna .

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

Ebifulumizibwa:

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

Okukyusa ebikozesebwa

Override utilities eziriwo nga okozesa ekisumuluzo kye kimu. Okugeza, bw’oba oyagala ebika ebirala eby’omugaso eby’okuddamu ebijjudde, osobola okukola kino:

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

Ebikozesebwa mu kukuba ebitabo

Okusobozesa printeky'okulonda era kijja kuleeta kiraasi z'omugaso ez'okukuba ebitabo, ezikozesebwa munda mu @media print { ... }kubuuza kw'emikutu gyokka.

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

Ebifulumizibwa:

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

Obukulu

Ebikozesebwa byonna ebikolebwa API birimu !importantokukakasa nti bisukkulumya ebitundu n'ebika by'ebikyusa nga bwe bigendereddwa. Osobola okukyusa ensengeka eno mu nsi yonna $enable-important-utilitiesn'enkyukakyuka (esookera ddala ku true).

Okukozesa API

Kati nga bw’omanyidde engeri API y’ebikozesebwa gy’ekola, yiga engeri y’okwongerako kiraasi zo ez’enjawulo n’okukyusa ebikozesebwa byaffe ebisookerwako.

Okwongerako ebikozesebwa

Ebikozesebwa ebipya bisobola okugattibwa ku $utilitiesmaapu esookerwako nga olina map-merge. Kakasa nti fayiro zaffe eza Sass ezeetaagisa era _utilities.scsszisooka kuyingizibwa, olwo okozese the map-mergeokugattako ebikozesebwa byo ebirala. Okugeza, wuuno engeri y'okwongerako ekintu ekiddamu cursornga kiriko emiwendo esatu.

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

Okukyusa mu bikozesebwa

Kyuusa ebikozesebwa ebiriwo mu $utilitiesmaapu esookerwako map-getne map-mergen'emirimu. Mu kyokulabirako wansi, twongera omuwendo ogw’enjawulo ku widthbikozesebwa. Tandika n’entandikwa map-mergen’oluvannyuma olage utility gy’oyagala okukyusaamu. Okuva awo, leeta nested "width"map with map-getokuyingira n'okukyusa utility's options n'emiwendo.

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

Ssobozesa okuddamu

Osobola okusobozesa kiraasi eziddamu ku kibinja ky'ebikozesebwa ekiriwo ebitali biddamu mu kiseera kino nga bwe kibadde. Okugeza, okufuula borderebibiina ebiddamu:

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

Kino kati kijja kuleeta enkyukakyuka eziddamu eza .borderne .border-0ku buli kifo eky’okumenya. CSS yo eyakolebwa ejja kufaanana bweti:

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

Kyuusa erinnya ly’ebikozesebwa

Ebula v4 utilities, oba emanyidde enkola endala ey'okutuuma amannya? API y’ebikozesebwa esobola okukozesebwa okusazaamu ekiva mu kikozesebwa classekiweereddwa—okugeza, okukyusa amannya .ms-*g’ebikozesebwa okudda mu kikadde .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 ),
    ),
  )
);

Ggyawo ebikozesebwa mu bulamu obwa bulijjo

Ggyawo ekintu kyonna ku bikozesebwa ebisookerwako ng'oteeka ekisumuluzo ky'ekibiina ku null. Okugeza, okuggyawo widthebikozesebwa byaffe byonna, kola a $utilities map-mergeera osseeko "width": nullmunda.

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

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

Ggyawo utility mu RTL

Edge cases ezimu zifuula RTL styling obuzibu , nga line breaks mu Luwarabu. Bwatyo ebikozesebwa bisobola okusuulibwa okuva ku RTL output nga oteeka rtloption ku false:

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

Ebifulumizibwa:

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

Kino tekifulumya kintu kyonna mu RTL, olw'ekiragiro ky'okufuga ekya RTLCSSremove .