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	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 yawe sa mapa, wala kini gihugpong.
`class`	Kapilian	Variable alang sa ngalan sa klase kung dili nimo gusto nga parehas kini sa kabtangan. Kung dili nimo ihatag ang `class`yawe ug `property`ang yawe usa ka han-ay sa mga kuwerdas, ang ngalan sa klase mao ang una nga elemento sa `property`array.
`state`	Kapilian	Listahan sa pseudo-class nga mga variant nga gusto `:hover`o `:focus`aron makamugna alang sa utility. Walay default nga bili.
`responsive`	Kapilian	Ang Boolean nga nagpaila kung ang mga responsive nga klase kinahanglan nga himuon. `false`pinaagi sa default.
`rfs`	Kapilian	Boolean aron mahimo ang fluid rescaling. Tan-awa ang panid sa RFS aron mahibal-an kung giunsa kini molihok. `false`pinaagi sa default.
`print`	Kapilian	Ang Boolean nga nagpaila kung ang mga klase sa pag-imprinta kinahanglan nga mamugna. `false`pinaagi sa default.
`rtl`	Kapilian	Ang Boolean nga nagpakita kung ang utility kinahanglan ibutang sa RTL. `true`pinaagi sa default.

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

Pasadya nga prefix sa klase

Gamita ang classopsyon aron usbon ang prefix sa klase nga gigamit sa gihugpong nga CSS:

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

Output:

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

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

Responsive nga mga utilities

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

Pag-ilis sa 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,
  ),
);

Mga gamit sa pag-imprinta

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.

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 .