Mafere na isi ọdịnaya Gaa na ntugharị docs
in English

API Utility

API bara uru bụ ngwa dabere na Sass iji mepụta klaasị ịba uru.

Na ibe a

A na-eji API ike anyị eme ihe bootstrap ma enwere ike iji ya gbanwee ma ọ bụ gbatịa klaasị uru nke ndabara site na Sass. API bara uru anyị dabere na usoro maapụ Sass na ọrụ maka ịmepụta ezinụlọ nke klaasị nwere nhọrọ dị iche iche. Ọ bụrụ na ịmabeghị maapụ Sass, gụọ na docs Sass gọọmentị ka ịmalite.

Maapụ $utilitiesahụ nwere akụrụngwa anyị niile ma emechaa jikọta ya na $utilitiesmaapụ omenala gị, ọ bụrụ na ọ dị. Map uru ahụ nwere ndepụta igodo nke otu ọrụ na-anabata nhọrọ ndị a:

Nhọrọ Ụdị Uru ndabara Nkọwa
property Achọrọ - Aha akụrụngwa, nke a nwere ike ịbụ eriri ma ọ bụ ọtụtụ eriri (dịka ọmụmaatụ, paddings kwụ ọtọ ma ọ bụ oke).
values Achọrọ - Ndepụta ụkpụrụ, ma ọ bụ maapụ ma ọ bụrụ na ịchọghị ka aha klaasị bụrụ otu uru ahụ. Ọ bụrụ nullna ejiri ya dị ka igodo maapụ, anaghị achịkọta ya.
class Nhọrọ efu Aha klas emepụtara. Ọ bụrụ na enyeghị ya ma propertybụrụ ọtụtụ eriri, classga-adaba na mmewere mbụ nke nhazi ahụ property.
css-var Nhọrọ false Boolean iji mepụta mgbanwe CSS kama iwu CSS.
local-vars Nhọrọ efu Map nke mgbanwe CSS mpaghara iji mepụta na mgbakwunye na iwu CSS.
state Nhọrọ efu Ndepụta nke ụdị pseudo-klas (dịka ọmụmaatụ, :hoverma ọ bụ :focus) iji mepụta.
responsive Nhọrọ false Boolean na-egosi ma ọ bụrụ na ekwesịrị imepụta klas na-anabata ya.
rfs Nhọrọ false Boolean iji mee ka mmiri na-emegharị ya na RFS .
print Nhọrọ false Boolean na-egosi ma ọ bụrụ na ọ dị mkpa ka ewepụta klas mbipụta.
rtl Nhọrọ true Boolean na-egosi ma ọ bụrụ na ekwesịrị idowe akụrụngwa na RTL.

API kọwara

A na-agbakwunye mgbanwe ọrụ niile na mgbanwe dị na mpempe akwụkwọ $utilitiesanyị _utilities.scss. Otu ọ bụla nke utilities dị ka nke a:

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

Nke na-emepụta ihe ndị a:

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

Ngwongwo

propertyEkwesịrị ịtọ igodo achọrọ maka akụrụngwa ọ bụla, yana ọ ga-enwerịrị akụrụngwa CSS bara uru. A na-eji akụrụngwa a n'ime usoro iwu ụlọ ọrụ emepụtara. Mgbe classewepụrụ igodo ahụ, ọ na-arụkwa ọrụ dị ka aha klaasị ndabere. Tụlee text-decorationuru ahụ:

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

Mpụta:

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

Ụkpụrụ

Jiri valuesigodo iji kọwapụta ụkpụrụ nke akọwapụtara propertykwesịrị iji na aha na iwu klaasị ewepụtara. Nwere ike ịbụ ndepụta ma ọ bụ maapụ (nke edobere na akụrụngwa ma ọ bụ na mgbanwe Sass).

Dị ka ndepụta, dị ka na text-decorationutilities :

values: none underline line-through

Dị ka maapụ, dị ka ya na opacityakụrụngwa :

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

Dịka mgbanwe Sass nke na-edobe ndepụta ma ọ bụ maapụ, dị ka ọ dị na positionakụrụngwa anyị :

values: $position-values

Klas

Jiri classnhọrọ ịgbanwe prefix klaasị ejiri na CSS achịkọtara. Dịka ọmụmaatụ, ịgbanwe site .opacity-*na gaa .o-*:

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

Mpụta:

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

Utilities mgbanwe CSS

Tọọ css-varnhọrọ boolean truena API ga-ewepụta mgbanwe CSS mpaghara maka onye nhọpụta enyere kama property: valueiwu na-emebu. Tụlee uru anyị .text-opacity-*:

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

Mpụta:

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

Ndị mgbanwe CSS mpaghara

Jiri local-varsnhọrọ ezipụta maapụ Sass nke ga-emepụta mgbanwe CSS mpaghara n'ime usoro iwu klaasị ịba uru. Biko mara na ọ nwere ike ịchọ ọrụ mgbakwunye iji rie mgbanwe CSS mpaghara na iwu CSS emepụtara. Dịka ọmụmaatụ, tụlee .bg-*ngwa ọrụ anyị:

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

Mpụta:

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

Steeti

Jiri statenhọrọ ahụ mepụta pseudo-klas iche iche. Ihe atụ pseudo-klas bụ :hoverna :focus. Mgbe ewepụtara ndepụta steeti, a na-emepụta aha klaasị maka klaasị pseudo ahụ. Dịka ọmụmaatụ, ka ịgbanwee opacity na hover, gbakwunye state: hoverna ị ga-abanye .opacity-hover:hoverna CSS gị achịkọtara.

Chọrọ ọtụtụ klaasị pseudo? Jiri ndepụta steeti kewapụrụ oghere: state: hover focus.

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

Mpụta:

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

Na-anabata

Tinye responsiveboolean ka iwepụta akụrụngwa na-anabata (dịka ọmụmaatụ .opacity-md-25) n'ofe ebe nkwụsịtụ niile .

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

Mpụta:

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

Bipụta

Ịkwanye printnhọrọ ahụ ga - ewepụtakwa klas ịba uru maka mbipụta, nke a na-etinye naanị n'ime @media print { ... }ajụjụ mgbasa ozi.

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

Mpụta:

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

Mkpa

Ngwa niile API mebere gụnyere !importantiji hụ na ha wepụrụ akụrụngwa yana klaasị mgbanwe dịka ebum n'uche. Ị nwere ike ịgbanwe ntọala a n'ụwa niile site na iji $enable-important-utilitiesmgbanwe (ndabara na true).

Iji API

Ugbu a ịmara ka API ngwa ngwa si arụ ọrụ, mụta ka esi etinye klaasị omenala nke gị wee gbanwee ngwa ọrụ ndabara anyị.

Wepụ akụrụngwa

Wepụ akụrụngwa ndị dị ugbu a site na iji otu igodo ahụ. Dịka ọmụmaatụ, ọ bụrụ na ịchọrọ klaasị ọzọ na-ejubiga ókè, ị nwere ike ime nke a:

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

Tinye akụrụngwa

Enwere ike ịgbakwunye ngwa ọhụrụ na $utilitiesmaapụ ndabara site na iji map-merge. Gbaa mbọ hụ na faịlụ Sass anyị chọrọ na _utilities.scssebubata ya na mbụ, wee jiri map-mergeya tinyekwuo akụrụngwa gị. Dịka ọmụmaatụ, nke a bụ otu esi etinye ngwa na-anabata cursornke nwere ụkpụrụ atọ.

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

Gbanwee akụrụngwa

Jiri yana ọrụ gbanwee akụrụngwa ndị dị na maapụ $utilitiesndabara . N'ọmụmaatụ dị n'okpuru, anyị na-agbakwunye uru ọzọ na akụrụngwa. Malite na nke mbụ wee kọwapụta akụrụngwa nke ịchọrọ ịgbanwe. Site n'ebe ahụ, weta maapụ akwụghị ụgwọ iji nweta ma gbanwee nhọrọ na ụkpụrụ nke akụrụngwa.map-getmap-mergewidthmap-merge"width"map-get

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

Kwado ịzaghachi

Ị nwere ike ịme klaasị na-anabata maka ngwa ngwa dị adị na-adịghị anabata ugbu a na ndabara. Dịka ọmụmaatụ, iji mee ka borderklaasị na-anabata:

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

Nke a ga - emepụta mgbanwe dị iche iche nke .borderna .border-0maka ebe nkwụsịtụ ọ bụla. CSS gị emepụtara ga-adị ka nke a:

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

Nyegharịa akụrụngwa aha

Utilities v4 na-efu efu, ma ọ bụ ejiri ya mee mgbakọ aha ọzọ? Enwere ike iji API ndị ọrụ ahụ kagbuo nsonaazụ classnke ngwa enyere—dịka ọmụmaatụ, iji nyegharịa .ms-*akụrụngwa ka ọ bụrụ ochie .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 ),
    ),
  )
);

Wepu akụrụngwa

Wepu ngwa ndabara ọ bụla site na ịtọ igodo otu ka null. Dịka ọmụmaatụ, iji wepu akụrụngwa anyị niile width, mepụta $utilities map-mergema tinye "width": nulln'ime.

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

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

Wepu akụrụngwa na RTL

Ụfọdụ ọnụ okwu na-eme ka ịke RTL sie ike , dịka nkwụsịtụ ahịrị na Arabic. Ya mere enwere ike iwepụ akụrụngwa na mmepụta RTL site na ịtọ rtlnhọrọ ka false:

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

Mpụta:

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

Nke a anaghị ewepụta ihe ọ bụla na RTL, ekele maka ntuziaka njikwa RTLCSSremove .