Utiliidi API

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

Sellel lehel

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 `null`kasutatakse kaardivõtmena, `class`ei lisata seda klassi nime ette.
`class`	Valikuline	null	Loodud klassi nimi. Kui seda pole esitatud ja `property`see on stringide massiiv, kasutatakse `class`vaikimisi massiivi esimest elementi `property`. Kui seda pole ette nähtud ja `property`see on string, `values`kasutatakse `class`nimede jaoks võtmeid.
`css-var`	Valikuline	`false`	Boolean CSS-i reeglite asemel CSS-muutujate genereerimiseks.
`css-variable-name`	Valikuline	null	Reeglikomplektis oleva CSS-muutuja kohandatud eesliiteta nimi.
`local-vars`	Valikuline	null	Lisaks CSS-i reeglitele genereeritavate kohalike CSS-muutujate kaart.
`state`	Valikuline	null	Pseudoklassi variantide loend (nt `:hover`võ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; }

Kui class: null, genereerib klassid iga valuesvõtme jaoks:

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

Väljund:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !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. Lisage valikuline css-variable-name, et määrata klassi nimest erineva CSS-muutuja nimi.

Mõelge meie .text-opacity-*kommunaalteenustele. Kui lisame css-variable-namevaliku, saame kohandatud väljundi.

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

Väljund:

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Eemaldage kommunaalteenused

Eemaldage kõik map-remove()vaikeutiliidid funktsiooniga Sass .

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

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

Utiliidi eemaldamiseks võite kasutada ka map-merge()funktsiooni Sass ja määrata rühmaklahvi nullolekusse.

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

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

@import "bootstrap/scss/utilities/api";

Lisa, eemalda, muuda

map-merge()Funktsiooni Sass abil saate korraga lisada, eemaldada ja muuta palju utiliite . Siin on, kuidas saate eelmised näited üheks suuremaks kaardiks ühendada.

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

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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 .