Utility API

Ang utility API usa ka himan nga nakabase sa Sass aron makamugna mga klase sa utility.

Niini nga panid

Ang mga gamit sa Bootstrap gihimo uban sa among utility API ug mahimong magamit sa pag-usab o pagpalapad sa among default nga set sa mga klase sa utility pinaagi sa Sass. Ang among utility API gibase sa usa ka serye sa mga mapa sa Sass ug mga gimbuhaton alang sa pagmugna sa mga pamilya sa mga klase nga adunay lainlaing mga kapilian. Kung dili ka pamilyar sa mga mapa sa Sass, basaha ang opisyal nga mga dokumento sa Sass aron makasugod.

Ang $utilitiesmapa naglangkob sa tanan namong mga gamit ug sa ulahi gihiusa sa imong naandan $utilitiesnga mapa, kung anaa. Ang mapa sa utility naglangkob sa usa ka yawe nga lista sa mga grupo sa utility nga nagdawat sa mosunod nga mga kapilian:

Opsyon	Matang	Default nga bili	Deskripsyon
`property`	Gikinahanglan	–	Ngalan sa kabtangan, kini mahimo nga usa ka hilo o usa ka han-ay sa mga kuwerdas (pananglitan, pinahigda nga mga padding o mga margin).
`values`	Gikinahanglan	–	Listahan sa mga kantidad, o usa ka mapa kung dili nimo gusto nga ang ngalan sa klase parehas sa kantidad. Kung `null`gigamit ingon nga yawe sa mapa, wala kini gihugpong.
`class`	Kapilian	null	Ngalan sa nahimo nga klase. Kung wala gihatag ug `property`usa ka han-ay sa mga kuldas, `class`mahimong default sa unang elemento sa `property`array.
`css-var`	Kapilian	`false`	Boolean para makamugna ug CSS variables imbes sa CSS rules.
`local-vars`	Kapilian	null	Mapa sa lokal nga mga variable sa CSS aron makamugna dugang sa mga lagda sa CSS.
`state`	Kapilian	null	Listahan sa pseudo-class nga mga variant (pananglitan, `:hover`o `:focus`) nga himoon.
`responsive`	Kapilian	`false`	Ang Boolean nga nagpakita kung ang mga responsive nga klase kinahanglan nga mamugna.
`rfs`	Kapilian	`false`	Boolean aron mahimo ang fluid rescaling gamit ang RFS .
`print`	Kapilian	`false`	Ang Boolean nga nagpaila kung ang mga klase sa pag-imprinta kinahanglan nga himuon.
`rtl`	Kapilian	`true`	Ang Boolean nga nagpakita kung ang utility kinahanglan ibutang sa RTL.

Gipasabot sa API

Ang tanang utility variables gidugang sa $utilitiesvariable sulod sa among _utilities.scssstylesheet. Ang matag grupo sa mga utilities ingon niini:

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

Nga nagpagawas sa mosunod:

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

Property

Ang gikinahanglan nga propertyyawe kinahanglan nga itakda alang sa bisan unsa nga utility, ug kini kinahanglan adunay usa ka balido nga CSS kabtangan. Kini nga kabtangan gigamit sa namugna nga mga lagda sa utility. Kung ang classyawe wala iapil, nagsilbi usab kini nga default nga ngalan sa klase. Hunahunaa ang text-decorationutility:

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

Output:

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

Mga bili

Gamita ang valuesyawe aron mahibal-an kung unsang mga kantidad alang sa gipiho propertyang kinahanglan gamiton sa mga ngalan ug lagda sa klase. Mahimong usa ka lista o mapa (gibutang sa mga utilities o sa usa ka variable nga Sass).

Ingon usa ka lista, sama sa mga text-decorationutilities :

values: none underline line-through

Ingon usa ka mapa, sama sa mga opacitygamit :

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

Ingon usa ka variable sa Sass nga nagtakda sa lista o mapa, sama sa among mga positiongamit :

values: $position-values

Klase

Gamita ang classopsyon aron usbon ang prefix sa klase nga gigamit sa giipon nga CSS. Pananglitan, ang pagbag-o gikan .opacity-*sa .o-*:

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

Output:

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

CSS variable utilities

Ibutang ang css-varboolean nga kapilian trueug ang API makamugna ug lokal nga CSS variables alang sa gihatag nga tigpili imbes sa naandang property: valuemga lagda. Hunahunaa ang among mga .text-opacity-*utilities:

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

Output:

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

Lokal nga CSS variables

Gamita ang local-varsopsyon sa pagpiho sa usa ka Sass nga mapa nga makamugna ug lokal nga CSS variables sulod sa utility class's ruleset. Palihug timan-i nga kini mahimong magkinahanglan og dugang nga trabaho sa pagkonsumo sa mga lokal nga CSS variables sa namugna nga mga lagda sa CSS. Pananglitan, tagda ang among mga .bg-*utilities:

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

Output:

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

Mga estado

Gamita ang stateopsyon aron makamugna og pseudo-class nga mga variation. Pananglitan nga pseudo-klase mao ang :hoverug :focus. Kung ang usa ka lista sa mga estado gihatag, ang mga ngalan sa klase gihimo alang sa kana nga pseudo-class. Pananglitan, aron mabag-o ang opacity sa hover, idugang state: hoverug makuha nimo ang .opacity-hover:hoverimong giipon nga CSS.

Nagkinahanglan daghang pseudo-klase? Gamit ug lista sa mga estado nga gibulag sa wanang: state: hover focus.

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

Output:

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

Makatubag

Idugang ang responsiveboolean aron makamugna og mga responsive utilities (eg, .opacity-md-25) sa tanang breakpoints .

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

Output:

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

Iimprinta

Ang pagpagana sa printkapilian makamugna usab og mga klase sa utility para sa pag-imprinta, nga magamit lamang sulod sa @media print { ... }pangutana sa media.

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

Output:

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

Kamahinungdanon

Ang tanan nga mga utilities nga gihimo sa API naglakip !importantsa pagsiguro nga ilang gi-override ang mga sangkap ug mga klase sa modifier ingon sa gituyo. Mahimo nimong i-toggle kini nga setting sa tibuuk kalibutan gamit ang $enable-important-utilitiesvariable (mga default sa true).

Paggamit sa API

Karon nga pamilyar ka sa kung giunsa ang mga utility API molihok, pagkat-on kung giunsa pagdugang ang imong kaugalingon nga naandan nga mga klase ug usba ang among default nga mga gamit.

I-override ang mga utilities

I-override ang kasamtangan nga mga utilities pinaagi sa paggamit sa samang yawe. Pananglitan, kung gusto nimo ang dugang nga responsive overflow nga mga klase sa utility, mahimo nimo kini:

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

Idugang ang mga utilities

Ang mga bag-ong utilities mahimong idugang sa default $utilitiesnga mapa nga adunay map-merge. Siguruha nga ang among gikinahanglan nga mga file sa Sass ug _utilities.scssgi-import una, dayon gamita ang map-mergearon idugang ang imong dugang nga mga gamit. Pananglitan, ania kung giunsa pagdugang ang usa ka responsive cursorutility nga adunay tulo nga kantidad.

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

Usba ang mga utilities

Usba ang kasamtangan nga mga gamit sa default $utilitiesnga mapa nga adunay map-getug map-mergemga gimbuhaton. Sa pananglitan sa ubos, nagdugang kami og dugang nga bili sa mga widthutilities. Pagsugod sa usa ka inisyal map-mergeug dayon ipiho kung unsang utility ang gusto nimong usbon. Gikan didto, kuhaa ang nested "width"nga mapa map-getaron ma-access ug mabag-o ang mga kapilian ug kantidad sa utility.

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

I-enable ang responsive

Mahimo nimong i-enable ang mga responsive nga klase alang sa usa ka kasamtangan nga set sa mga utilities nga dili karon motubag pinaagi sa default. Pananglitan, aron matubag ang mga borderklase:

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

Kini karon makamugna og responsive nga mga kalainan sa .borderug .border-0alang sa matag breakpoint. Ang imong nahimo nga CSS mahimong sama niini:

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

Usba ang ngalan sa mga utilities

Nawala ang v4 utilities, o gigamit sa laing kombensiyon sa pagngalan? Ang mga utilities API mahimong gamiton sa pag-override sa resulta classsa usa ka gihatag nga utility—pananglitan, sa pag-usab .ms-*sa mga utilities ngadto sa oldish .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 ),
    ),
  )
);

Kuhaa ang mga utilities

Kuhaa ang bisan unsang default nga mga gamit pinaagi sa pagbutang sa yawe sa grupo sa null. Pananglitan, aron tangtangon ang tanan namong mga widthgamit, paghimo ug $utilities map-mergeug idugang "width": nullsa sulod.

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

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

Kuhaa ang utility sa RTL

Ang ubang mga edge case nagpalisud sa pag-istilo sa RTL , sama sa mga linya sa linya sa Arabic. Sa ingon ang mga utilities mahimong ihulog gikan sa RTL output pinaagi sa pagbutang sa rtlkapilian sa false:

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

Output:

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

Wala kini magpagawas bisan unsa sa RTL, salamat sa RTLCSS removecontrol directive .