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	Default value	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	null	Zita rekirasi yakagadzirwa. Kana isina kupihwa uye `property`iri nhevedzano yetambo, `class`inozogara kune yekutanga chinhu `property`cheiyo array.
`css-var`	Optional	`false`	Boolean kugadzira CSS zvinoshanduka pane mitemo yeCSS.
`local-vars`	Optional	null	Mepu yenzvimbo dzeCSS zvinosiyanisa kugadzira kuwedzera kune iyo CSS mitemo.
`state`	Optional	null	Rondedzero yepseudo-kirasi akasiyana (eg, `:hover`kana `:focus`) kugadzira.
`responsive`	Optional	`false`	Boolean ichiratidza kana makirasi anopindura achifanirwa kugadzirwa.
`rfs`	Optional	`false`	Boolean yekugonesa kudzoreredza kwemvura neRFS .
`print`	Optional	`false`	Boolean ichiratidza kana makirasi ekudhinda achida kugadzirwa.
`rtl`	Optional	`true`	Boolean ichiratidza kana zvinoshandiswa zvichifanira kuchengetwa muRTL.

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

Property

Kiyi inodiwa propertyinofanirwa kusetwa kune chero yekushandisa, uye inofanirwa kunge iine inoshanda CSS pfuma. Ichi chivakwa chinoshandiswa mune inogadzirwa utility mutemo. Kana classkiyi yasiiwa, inoshandawo sezita rekirasi rekutanga. Funga text-decorationnezvekushandisa:

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

Zvakabuda:

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

Values

Shandisa valueskiyi kutsanangura kuti ndezvipi zvakakosha zvezvakatsanangurwa propertyzvinofanira kushandiswa mumazita ekirasi akagadzirwa uye mitemo. Inogona kunge iri runyorwa kana mepu (yakaiswa mune zvishandiso kana mune yeSass inosiyana).

Sechinyorwa, text-decorationsenge nezvinoshandiswa :

values: none underline line-through

Semepu, opacitysenge nezvishandiso :

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

Sekuchinja kweSass kunoseta rondedzero kana mepu, sezviri mumidziyo positionyedu :

values: $position-values

Kirasi

Shandisa classsarudzo kushandura prefix yekirasi inoshandiswa muCSS yakaunganidzwa. Somuenzaniso, kuchinja kubva .opacity-*ku .o-*:

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

Zvakabuda:

.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 siyana zvinoshandiswa

Seta iyo css-varboolean sarudzo trueuye iyo API ichagadzira yemuno CSS chinja kune yakapihwa sarudzo pane yakajairika property: valuemitemo. Funga nezvezvishandiso zvedu .text-opacity-*:

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

Zvakabuda:

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

Nzvimbo dzeCSS dzakasiyana

Shandisa iyo local-varssarudzo kutsanangura mepu yeSass iyo inoburitsa emuno CSS machinjiro mukati meiyo utility kirasi's ruleset. Ndokumbira utarise kuti zvingangoda rimwe basa kuti upedze iwo emuno maCSS akasiyana mumitemo yakagadzirwa yeCSS. Semuenzaniso, funga nezve .bg-*zvishandiso zvedu:

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

Zvakabuda:

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

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

Anoteerera

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

Dhinda

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.

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

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 .