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ị 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ọ Na-agbanwe maka aha klaasị ma ọ bụrụ na ịchọghị ka ọ bụrụ otu ihe onwunwe ahụ. Ọ bụrụ na ị nyeghị classigodo na propertyigodo bụ ọtụtụ eriri, aha klaasị ga-abụ ihe mbụ propertyn'usoro.
state Nhọrọ Ndepụta nke ụdị pseudo-klas dị ka :hoverma ọ bụ :focusiwepụta maka ịba uru. Enweghị uru ndabara.
responsive Nhọrọ Boolean na-egosi ma ọ dị mkpa ka ewepụta klaasị na-anabata ya. falsena ndabara.
rfs Nhọrọ Boolean iji mee ka mmiri na-emegharị ihe. Lee anya na ibe RFS ka ịmata ka nke a si arụ ọrụ. falsena ndabara.
print Nhọrọ Boolean na-egosi ma ọ bụrụ na ọ dị mkpa ka ewepụta klas mbipụta. falsena ndabara.
rtl Nhọrọ Boolean na-egosi ma ọ bụrụ na ekwesịrị idowe akụrụngwa na RTL. truena ndabara.

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

prefix klaasị omenala

Jiri classnhọrọ iji gbanwee prefix klaasị ejiri na CSS achịkọtara:

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

Mpụta:

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

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

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

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

Ị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ị.

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 .