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ụ `null`na ejiri ya dị ka igodo maapụ, `class`edobeghị ya na aha klaasị.
`class`	Nhọrọ	efu	Aha klas emepụtara. Ọ bụrụ na enyeghị ya ma `property`bụrụ ọtụtụ eriri, `class`ga-adaba na mmewere mbụ nke nhazi ahụ `property`. Ọ bụrụ na enyeghị ya ma `property`bụrụ eriri, a na `values`-eji igodo maka `class`aha.
`css-var`	Nhọrọ	`false`	Boolean iji mepụta mgbanwe CSS kama iwu CSS.
`css-variable-name`	Nhọrọ	efu	Aha enweghị prefixed omenala maka mgbanwe CSS n'ime ụkpụrụ iwu.
`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ụ, `:hover`ma ọ 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; }

Ọ bụrụ class: null, na-ewepụta klaasị maka valuesigodo ọ bụla:

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

Mpụta:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !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. Tinye nhọrọ css-variable-nameiji tọọ aha mgbanwe CSS dị iche karịa aha klaasị.

Tụlee uru anyị .text-opacity-*. Ọ bụrụ na anyị gbakwunye css-variable-namenhọrọ, anyị ga-enweta mmepụta omenala.

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

Mpụta:

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

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

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

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

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

Wepu akụrụngwa

Wepu ngwa ọ bụla nke ndabara site na iji ọrụ 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";

Ịnwekwara ike iji ọrụ map-merge()Sass wee tọọ igodo otu nullka iwepụ ngwa ahụ.

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

Tinye, wepụ, gbanwee

Ị nwere ike ịgbakwunye, wepụ, ma gbanwee ọtụtụ ngwa ngwa n'otu oge site na iji ọrụ map-merge()Sass . Nke a bụ otu ị ga-esi ejikọta ihe atụ ndị gara aga ka ọ bụrụ otu nnukwu maapụ.

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

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 .