Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
in English

Utiliidi API

Utiliidi API on Sassil põhinev tööriist utiliidiklasside genereerimiseks.

Bootstrapi utiliidid genereeritakse meie utiliidi API-ga ja neid saab kasutada Sassi kaudu meie utiliidiklasside vaikekomplekti muutmiseks või laiendamiseks. Meie utiliidi API põhineb mitmetel Sassi kaartidel ja funktsioonidel, et luua erinevate valikutega klassiperekondi. Kui te pole Sassi kaartidega tuttav, lugege alustamiseks Sassi ametlikke dokumente .

Kaart $utilitiessisaldab kõiki meie utiliite ja hiljem liidetakse see teie kohandatud $utilitieskaardiga, kui see on olemas. Utiliidi kaart sisaldab võtmetega loendit utiliidirühmadest, mis aktsepteerivad järgmisi valikuid:

Võimalus Tüüp Vaikeväärtus Kirjeldus
property Nõutud Atribuudi nimi, see võib olla string või stringide massiiv (nt horisontaalsed täidised või veerised).
values Nõutud Väärtuste loend või kaart, kui te ei soovi, et klassi nimi oleks väärtusega sama. Kui nullseda kasutatakse kaardivõtmena, siis seda ei kompileerita.
class Valikuline null Loodud klassi nimi. Kui seda pole esitatud ja propertysee on stringide massiiv, kasutatakse classvaikimisi massiivi esimest elementi property.
css-var Valikuline false Boolean CSS-i reeglite asemel CSS-muutujate genereerimiseks.
local-vars Valikuline null Lisaks CSS-i reeglitele genereeritavate kohalike CSS-muutujate kaart.
state Valikuline null Pseudoklassi variantide loend (nt :hovervõi :focus), mida luua.
responsive Valikuline false Tõeväärtus, mis näitab, kas reageerivad klassid tuleks genereerida.
rfs Valikuline false Tõeväärtus, et võimaldada vedeliku skaleerimist RFS-iga .
print Valikuline false Tõeväärtus, mis näitab, kas prindiklassid tuleb genereerida.
rtl Valikuline true Tõeväärtus, mis näitab, kas utiliiti tuleks hoida RTL-is.

API selgitas

Kõik kasulikud muutujad lisatakse $utilitiesmeie _utilities.scssstiilitabeli muutujale. Iga utiliitide rühm näeb välja umbes selline:

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

Mis annab välja järgmise:

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

Kinnisvara

Nõutav propertyvõti tuleb määrata mis tahes utiliidi jaoks ja see peab sisaldama kehtivat CSS-i atribuuti. Seda atribuuti kasutatakse loodud utiliidi reeglistikus. Kui classvõti on välja jäetud, toimib see ka klassi vaikenimena. Mõelge text-decorationutiliidile:

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

Väljund:

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

Väärtused

Kasutage valuesvõtit, et määrata, milliseid määratud väärtusi propertytuleks genereeritud klassinimedes ja reeglites kasutada. Võib olla loend või kaart (määratud utiliitides või Sassi muutujas).

Loendina, nagu text-decorationkommunaalteenuste puhul :

values: none underline line-through

Kaardina, nagu opacitykommunaalteenuste puhul :

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

Sassi muutujana, mis määrab loendi või kaardi, nagu meie positionutiliitides :

values: $position-values

Klass

Kasutage classkompileeritud CSS-is kasutatava klassi prefiksi muutmiseks valikut. Näiteks vahetamiseks .opacity-*väärtuselt .o-*:

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

Väljund:

.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-i muutuja utiliidid

Määrake css-vartõeväärtuse suvand trueja API genereerib antud selektori jaoks tavapäraste property: valuereeglite asemel kohalikud CSS-muutujad. Mõelge meie .text-opacity-*kommunaalteenustele:

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

Väljund:

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

Kohalikud CSS-muutujad

Kasutage local-varsvalikut Sassi kaardi määramiseks, mis genereerib utiliidiklassi reeglistikus kohalikud CSS-muutujad. Pange tähele, et nende kohalike CSS-i muutujate kasutamine loodud CSS-reeglites võib nõuda lisatööd. Mõelge näiteks meie .bg-*kommunaalteenustele:

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

Väljund:

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

osariigid

Kasutage statepseudoklassi variatsioonide genereerimiseks suvandit. Pseudoklassid on näiteks :hoverja :focus. Kui olekute loend on esitatud, luuakse selle pseudoklassi jaoks klassinimed. Näiteks läbipaistmatuse muutmiseks hõljutamisel lisage state: hoverja saate .opacity-hover:hoveroma kompileeritud CSS-i.

Kas vajate mitut pseudoklassi? Kasutage tühikutega eraldatud olekute loendit: state: hover focus.

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

Väljund:

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

Vastutulelik

Lisage tõeväärtus, et luua kõigis katkestuspunktidesresponsive reageerivad utiliidid (nt .opacity-md-25) .

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

Väljund:

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

Prindi

Selle printvaliku lubamisel genereeritakse ka printimiseks utiliidiklassid, mida rakendatakse ainult @media print { ... }meediumipäringus.

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

Väljund:

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

Tähtsus

Kõik API poolt genereeritud utiliidid hõlmavad tagamist, !importantet need alistaksid komponendid ja modifikaatoriklassid, nagu ette nähtud. Saate seda sätet globaalselt lülitada $enable-important-utilitiesmuutujaga (vaikimisi true).

API kasutamine

Nüüd, kui olete tuttav utiliitide API toimimisega, õppige, kuidas lisada oma kohandatud klasse ja muuta meie vaikeutiliite.

Utiliidide alistamine

Alistage olemasolevad utiliidid sama klahvi abil. Näiteks kui soovite täiendavaid tundliku ülevoolu utiliidi klasse, saate teha järgmist.

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

Lisage kommunaalteenused

Uusi utiliite saab vaikekaardile lisada $utilitiesnupuga map-merge. Veenduge, et meie nõutavad Sass-failid ja _utilities.scssoleksid esmalt imporditud, seejärel kasutage map-mergetäiendavate utiliitide lisamiseks. Näiteks siin on, kuidas lisada cursorkolme väärtusega reageeriv utiliit.

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

Muuda utiliite

$utilitiesMuutke vaikekaardil olemasolevaid utiliite funktsioonidega map-getja map-merge. Allolevas näites lisame widthutiliitidele täiendava väärtuse. Alustage initsiaaliga map-mergeja seejärel määrake, millist utiliiti soovite muuta. Sealt laadige pesastatud "width"kaart, map-getet pääseda juurde ning muuta utiliidi valikuid ja väärtusi.

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

Luba reageeriv

Saate lubada reageerivad klassid olemasolevale utiliitide komplektile, mis praegu vaikimisi ei reageeri. Näiteks borderklasside tundlikuks muutmiseks tehke järgmist.

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

See loob nüüd iga katkestuspunkti .borderja .border-0iga katkestuspunkti jaoks tundlikud variatsioonid. Teie loodud CSS näeb välja selline:

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

Nimetage utiliidid ümber

Kas puuduvad v4 utiliidid või olete harjunud mõne muu nimetamistavaga? Utiliidide API-t saab kasutada classantud utiliidi tulemuse alistamiseks – näiteks utiliitide ümbernimetamiseks .ms-*vanaks .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 ),
    ),
  )
);

Eemaldage kommunaalteenused

Eemaldage kõik vaikeutiliidid, määrates rühmaklahvi väärtuseks null. Näiteks kõigi meie widthutiliitide eemaldamiseks looge $utilities map-mergeja lisage "width": nullsees.

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

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

Eemaldage RTL-is utiliit

Mõned servaümbrised muudavad RTL-i stiili keeruliseks , näiteks araabia keeles reavahetused. Seega saab utiliidid RTL-i väljundist välja jätta, määrates rtlvaliku false:

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

Väljund:

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

Tänu RTLCSS-i removejuhtimisdirektiivile ei väljasta see RTL-is midagi .