Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

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. Bwe nullkiba nga kikozesebwa nga ekisumuluzo kya maapu, tekikuŋŋaanyizibwa.
class Kya kusalawo tekili mu mateeka Erinnya lya kiraasi ekoleddwa. Bwe kitaweebwa era propertynga nsengeka y'ennyiriri, classejja kusooka ku kintu ekisooka propertyeky'ensengekera.
css-var Kya kusalawo false Boolean okukola enkyukakyuka za CSS mu kifo ky'amateeka ga CSS.
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, :hoveroba :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; }

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. Lowooza ku .text-opacity-*bikozesebwa byaffe:

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

Ebifulumizibwa:

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

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/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 .