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	Omuwendo ogusookerwako	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. Singa `null`ekozesebwa nga ekisumuluzo `class`kya maapu, tekikulemberwa erinnya lya kiraasi.
`class`	Kya kusalawo	tekili mu mateeka	Erinnya lya kiraasi ekoleddwa. Bwe kitaweebwa era `property`nga nsengeka y'ennyiriri, `class`ejja kusooka ku kintu ekisooka `property`eky'ensengekera. Bwe kitaweebwa era `property`nga lunyiriri, `values`ebisumuluzo bikozesebwa ku `class`mannya.
`css-var`	Kya kusalawo	`false`	Boolean okukola enkyukakyuka za CSS mu kifo ky'amateeka ga CSS.
`css-variable-name`	Kya kusalawo	tekili mu mateeka	Erinnya erya bulijjo eritaliiko ntandikwa eri enkyukakyuka ya CSS munda mu nsengeka y'amateeka.
`local-vars`	Kya kusalawo	tekili mu mateeka	Maapu y'enkyukakyuka za CSS ez'omu kitundu okukola nga kwotadde n'amateeka ga CSS.
`state`	Kya kusalawo	tekili mu mateeka	Olukalala lw'enjawulo ez'ekika eky'obulimba (okugeza, `:hover`oba `:focus`) okukola.
`responsive`	Kya kusalawo	`false`	Boolean eraga oba kiraasi eziddamu zirina okukolebwa.
`rfs`	Kya kusalawo	`false`	Boolean okusobozesa okuddamu okupima amazzi ne RFS .
`print`	Kya kusalawo	`false`	Boolean eraga oba kiraasi z'okukuba ebitabo zeetaaga okukolebwa.
`rtl`	Kya kusalawo	`true`	Boolean eraga oba utility erina okukuumibwa mu RTL.

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

Eby'obwa nannyini

Ekisumuluzo ekyetaagisa propertykiteekwa okuteekebwawo ku kikozesebwa kyonna, era kirina okubaamu ekintu kya CSS ekituufu. Eky'obugagga kino kikozesebwa mu mateeka g'ekintu ekikoleddwa. Ekisumuluzo bwe classkirekebwawo, era kikola ng'erinnya lya kiraasi erisookerwako. Lowooza ku nkola text-decorationy’omugaso:

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

Ebifulumizibwa:

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

Empisa

Kozesa valuesekisumuluzo okulaga emiwendo ki egy'ekiragiddwa propertyegirina okukozesebwa mu mannya ga kiraasi n'amateeka agakoleddwa. Kiyinza okuba olukalala oba maapu (eteekeddwa mu bikozesebwa oba mu nkyukakyuka ya Sass).

Nga olukalala, nga ne text-decorationutilities :

values: none underline line-through

Nga maapu, nga ne opacityutilities :

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

Nga enkyukakyuka ya Sass eteeka olukalala oba maapu, nga mu positionbikozesebwa byaffe :

values: $position-values

Essomo

Kozesa classeky'okulonda okukyusa entandikwa ya kiraasi ekozesebwa mu CSS ekunganyiziddwa. Okugeza, okukyusa okuva .opacity-*ku okudda ku .o-*:

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

Ebifulumizibwa:

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

Singa class: null, ekola kiraasi za buli kimu ku valuesbisumuluzo:

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

Ebifulumizibwa:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

Ebikozesebwa ebikyukakyuka ebya CSS

Teeka enkola ya css-varboolean ku trueera API ejja kukola enkyukakyuka za CSS ez'omu kitundu ez'omusunsuzi aweereddwa mu kifo property: valueky'amateeka aga bulijjo. Okwongerako eky'okwesalirawo css-variable-nameokuteeka erinnya ly'enkyukakyuka ya CSS ey'enjawulo okusinga erinnya lya kiraasi.

Lowooza ku .text-opacity-*bikozesebwa byaffe. Singa twongerako css-variable-nameeky'okulonda, tujja kufuna ekifulumizibwa eky'ennono.

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

Ebifulumizibwa:

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

Enkyukakyuka za CSS ez’omu kitundu

Kozesa local-varseky'okulonda okulaga maapu ya Sass ejja okukola enkyukakyuka za CSS ez'omu kitundu munda mu mateeka g'ekibiina ky'omugaso. Nsaba omanye nti kiyinza okwetaagisa omulimu ogw'enjawulo okukozesa enkyukakyuka ezo eza CSS ez'omu kitundu mu mateeka ga CSS agakoleddwa. Ng’ekyokulabirako, lowooza ku bintu bye tukozesa .bg-*:

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

Ebifulumizibwa:

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

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

Okuddamu

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

Kuba mu kyapa

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.

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

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/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";

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/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";

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/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";

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/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";

Ggyawo ebikozesebwa mu bulamu obwa bulijjo

Ggyawo ekintu kyonna ku bikozesebwa ebisookerwako n'omulimu gwa map-remove()Sass .

@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";

Osobola n'okukozesa omulimu gwa map-merge()Sass n'oteeka ekisumuluzo ky'ekibinja ku nullokuggyawo omugaso.

@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";

Okwongera, okuggyawo, okukyusa

Osobola okwongera, okuggyawo, n'okukyusa ebikozesebwa bingi omulundi gumu n'omulimu gwa map-merge()Sass . Laba engeri gy’oyinza okugatta ebyokulabirako eby’emabega mu maapu emu ennene.

@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";

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 .