Utility API

Iyo yekushandisa API ndeye Sass-yakavakirwa chishandiso kugadzira utility makirasi.

Pa peji ino

Bootstrap utilities inogadzirwa neyedu yekushandisa API uye inogona kushandiswa kugadzirisa kana kuwedzera yedu yakasarudzika seti yemakirasi ekushandisa kuburikidza neSass. Yedu yekushandisa API yakavakirwa panhevedzano yemamepu eSass uye mabasa ekugadzira mhuri dzemakirasi ane akasiyana sarudzo. Kana usiri kujairana nemamepu eSass, verenga pane zviri pamutemo Sass zvinyorwa kuti utange.

Mepu $utilitiesine zvese zvatinoshandisa uye inozobatanidzwa $utilitiesnemepu yako yakasarudzika, kana iripo. Mepu yekushandisa ine kiyi yerunyorwa rwemapoka anoshanda anobvuma zvinotevera sarudzo:

Option	Type	Tsanangudzo
`property`	Zvinodiwa	Zita reimba, iyi inogona kunge iri tambo kana tambo dzakawanda (semuenzaniso, mapedhi akachinjika kana miganho).
`values`	Zvinodiwa	Rondedzero yezvakakosha, kana mepu kana usingadi kuti zita rekirasi rifanane neukoshi. Kana `null`ikashandiswa sekiyi yemepu, haina kunyorwa.
`class`	Optional	Variable yezita rekirasi kana iwe usingade kuti rifanane nepfuma. Kana iwe ukasapa `class`kiyi uye `property`kiyi imhando yetambo, zita rekirasi richava chinhu chekutanga cheiyo `property`array.
`state`	Optional	Rondedzero yepseudo-kirasi akasiyana anoda `:hover`kana `:focus`kugadzira zvekushandisa. Hapana default value.
`responsive`	Optional	Boolean ichiratidza kana makirasi anopindura achida kugadzirwa. `false`by default.
`rfs`	Optional	Boolean kugonesa kudzoreredza kwemvura. Tarisa pane iyo RFS peji kuti uone kuti izvi zvinoshanda sei. `false`by default.
`print`	Optional	Boolean ichiratidza kana makirasi ekudhinda achida kugadzirwa. `false`by default.
`rtl`	Optional	Boolean ichiratidza kana zvinoshandiswa zvichifanira kuchengetwa muRTL. `true`by default.

API yakatsanangura

Zvese zvinoshandiswa zvinoshandiswa zvinowedzerwa kune iyo $utilitiesshanduko mukati _utilities.scssmemaitiro edu. Boka rega rega rezvishandiso rinotaridzika seizvi:

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

Izvo zvinoburitsa zvinotevera:

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

Custom class prefix

Shandisa classsarudzo yekushandura kirasi prefix inoshandiswa muCSS yakanyorwa:

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

Zvakabuda:

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

States

Shandisa statesarudzo kugadzira pseudo-kirasi misiyano. Muenzaniso pseudo-makirasi ari :hoveruye :focus. Kana rondedzero yematunhu yapihwa, mazita ekirasi anogadzirwa kune iyo pseudo-kirasi. Semuenzaniso, kuti uchinje opacity pane hover, wedzera state: hoveruye iwe .opacity-hover:hoveruchapinda muCSS yako yakaunganidzwa.

Unoda akawanda pseudo-makirasi? Shandisa runyoro rwakaparadzana nenzvimbo yematunhu: state: hover focus.

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

Zvakabuda:

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

Zvinoteerera zvinoshandiswa

Wedzera iyo responsiveboolean kuti igadzire zvinoteerera zvinoshandiswa (semuenzaniso, .opacity-md-25) pane ese mabreakpoints .

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

Zvakabuda:

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

Kuchinja zvishandiso

Bvisa zvishandiso zviripo nekushandisa kiyi imwechete. Semuenzaniso, kana iwe uchida mamwe anopindura mafashama ekushandisa makirasi, unogona kuita izvi:

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

Dhinda zvinoshandiswa

Kugonesa iyo printsarudzo kuchagadzirawo makirasi ekushandisa ekudhinda, ayo anongoiswa mukati @media print { ... }memubvunzo wenhau.

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

Zvakabuda:

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

Kukosha

Zvese zvinoshandiswa zvinogadzirwa neAPI zvinosanganisira !importantkuve nechokwadi kuti zvinodarika zvikamu uye makirasi ekugadzirisa sezvakarongwa. Iwe unogona kushandura iyi kurongerwa pasi rose $enable-important-utilitiesnekusiyana (defaults ku true).

Kushandisa API

Iye zvino zvawave kujairana nemashandisirwo anoita API, dzidza kuwedzera ako ega makirasi uye gadzirisa yedu yakasarudzika yekushandisa.

Wedzera zvishandiso

Zvitsva zvinoshandiswa zvinogona kuwedzerwa kumepu $utilitiesyakasarudzika ine map-merge. Ita shuwa kuti mafaera edu eSass anodiwa uye apinzwa _utilities.scsskunze kwenyika kutanga, wobva washandisa iyo map-mergekuwedzera zvimwe zvekushandisa. Semuyenzaniso, heino nzira yekuwedzera inopindura cursoryekushandisa ine matatu ma values.

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

Shandura zvishandiso

Gadzirisa zviripo $utilitiesmumepu yakasarudzika ine map-getuye map-mergemabasa. Mumuenzaniso uri pazasi, tiri kuwedzera imwe kukosha kune widthzvishandiso. Tanga nekutanga map-mergeuye wozotaura kuti ndechipi chishandiso chaunoda kugadzirisa. Kubva ipapo, tora "width"mepu yakavharirwa map-getkuti uwane uye ugadzirise sarudzo dzekushandisa uye kukosha.

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

Bvumira kupindura

Iwe unokwanisa kugonesa makirasi anopindura kune iripo seti yezvishandiso izvo zvisiri kuita zvemazuva ano nekukasira. Semuenzaniso, kuita kuti bordermakirasi apindure:

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

Izvi zvino zvinogadzira misiyano inopindura .borderuye .border-0yeimwe neimwe breakpoint. CSS yako yakagadzirwa ichaita seizvi:

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

Rename zvishandiso

Kushaikwa kwev4 zvishandiso, kana kushandiswa kune imwe gungano rezita? Zvishandiso API zvinogona kushandiswa kupfuudza mhedzisiro yechinhu chakapihwa class- semuenzaniso, kutumidza zita .ms-*rekushandisa kuti 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 ),
    ),
  )
);

Bvisa zvinoshandiswa

Bvisa chero chezvishandiso zvekutanga nekuseta kiyi yeboka ku null. Semuenzaniso, kubvisa zvese zvatinoshandisa width, gadzira a $utilities map-mergeuye wedzera "width": nullmukati.

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

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

Bvisa zvinoshandiswa muRTL

Mamwe makesi emupendero anoita kuti RTL styling iome , senge mitsara yekutyora muchiArabic. Saka zvinoshandiswa zvinogona kudonhedzwa kubva kuRTL kubuda nekuisa rtlsarudzo ku false:

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

Zvakabuda:

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

Izvi hazvibudise chero chinhu muRTL, nekuda kweiyo RTLCSS removeyekudzora dhairekitori .