Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

Utility API

API pripomočkov je orodje, ki temelji na Sassu, za ustvarjanje razredov pripomočkov.

Na tej strani

Pripomočki Bootstrap so ustvarjeni z našim API-jem za pripomočke in jih je mogoče uporabiti za spreminjanje ali razširitev našega privzetega nabora razredov pripomočkov prek Sass. Naš uporabniški API temelji na seriji zemljevidov in funkcij Sass za generiranje družin razredov z različnimi možnostmi. Če niste seznanjeni z zemljevidi Sass, preberite uradne dokumente Sass , da začnete.

Zemljevid $utilitiesvsebuje vse naše pripomočke in se pozneje združi z vašim $utilitieszemljevidom po meri, če je na voljo. Zemljevid pripomočkov vsebuje označen seznam skupin pripomočkov, ki sprejemajo naslednje možnosti:

Možnost Vrsta Opis
property Obvezno Ime lastnosti, to je lahko niz ali niz nizov (npr. vodoravni oblazinjeni robovi).
values Obvezno Seznam vrednosti ali zemljevid, če ne želite, da je ime razreda enako vrednosti. Če nullse uporablja kot ključ zemljevida, se ne prevede.
class Neobvezno Spremenljivka za ime razreda, če ne želite, da je enako lastnosti. Če ključa ne navedete classin propertyje ključ matrika nizov, bo ime razreda prvi element propertymatrike.
state Neobvezno Seznam variant psevdorazredov, kot je :hoverali :focusza ustvarjanje pripomočka. Ni privzete vrednosti.
responsive Neobvezno Logična vrednost, ki označuje, ali je treba ustvariti odzivne razrede. falseprivzeto.
rfs Neobvezno Logična vrednost za omogočanje spreminjanja velikosti tekočine. Oglejte si stran RFS , da ugotovite, kako to deluje. falseprivzeto.
print Neobvezno Logična vrednost, ki označuje, ali je treba ustvariti tiskalne razrede. falseprivzeto.
rtl Neobvezno Logična vrednost, ki označuje, ali naj se pripomoček hrani v RTL. trueprivzeto.

Razložen API

Vse uporabne spremenljivke so dodane $utilitiesspremenljivki v naši _utilities.scsstabeli slogov. Vsaka skupina pripomočkov izgleda nekako takole:

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

Kar izpiše naslednje:

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

Predpona razreda po meri

Uporabite classmožnost za spremembo predpone razreda, uporabljene v prevedenem CSS:

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

Izhod:

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

države

Uporabite statemožnost za ustvarjanje različic psevdorazreda. Primeri psevdorazredov so :hoverin :focus. Ko je naveden seznam stanj, se za ta psevdorazred ustvarijo imena razredov. Na primer, če želite spremeniti motnost pri premikanju miške, dodajte state: hoverin dobili boste .opacity-hover:hoversvoj prevedeni CSS.

Potrebujete več psevdorazredov? Uporabite s presledki ločen seznam stanj: state: hover focus.

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

Izhod:

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

Odzivni pripomočki

Dodajte responsivelogično vrednost za ustvarjanje odzivnih pripomočkov (npr. .opacity-md-25) v vseh prelomnih točkah .

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

Izhod:

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

Menjava pripomočkov

Preglasite obstoječe pripomočke z uporabo istega ključa. Na primer, če želite dodatne odzivne razrede pripomočkov za prelivanje, lahko naredite to:

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

Če omogočite printmožnost, boste ustvarili tudi razrede pripomočkov za tiskanje, ki se uporabljajo samo znotraj @media print { ... }medijske poizvedbe.

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

Izhod:

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

Pomembnost

Vsi pripomočki, ki jih ustvari API, vključujejo !important, da zagotovijo, da preglasijo komponente in razrede modifikatorjev, kot je predvideno. To nastavitev lahko globalno preklopite s $enable-important-utilitiesspremenljivko (privzeto na true).

Uporaba API-ja

Zdaj, ko ste seznanjeni s tem, kako deluje API za pripomočke, se naučite, kako dodati lastne razrede po meri in spremeniti naše privzete pripomočke.

Dodajte pripomočke

Nove pripomočke je mogoče dodati privzetemu $utilitieszemljevidu z map-merge. Prepričajte se, da so naše zahtevane datoteke Sass in _utilities.scssnajprej uvožene, nato uporabite map-mergeza dodajanje dodatnih pripomočkov. Tukaj je na primer, kako dodati odziven cursorpripomoček s tremi vrednostmi.

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

Spremenite pripomočke

Spremenite obstoječe pripomočke v privzetem $utilitieszemljevidu s funkcijami map-getin map-merge. widthV spodnjem primeru pripomočkom dodajamo dodatno vrednost . Začnite z začetnico map-mergein nato določite, kateri pripomoček želite spremeniti. Od tam pridobite ugnezdeni "width"zemljevid z map-getza dostop in spreminjanje možnosti in vrednosti pripomočka.

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

Omogoči odzivnost

Odzivne razrede lahko omogočite za obstoječi nabor pripomočkov, ki trenutno privzeto niso odzivni. Na primer, da bodo borderrazredi odzivni:

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

To bo zdaj ustvarilo odzivne različice .borderin .border-0za vsako prelomno točko. Vaš ustvarjen CSS bo videti takole:

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

Preimenujte pripomočke

Manjkajo pripomočki v4 ali ste navajeni na drugo konvencijo poimenovanja? API za pripomočke lahko uporabite za preglasitev rezultatov classdanega pripomočka – na primer za preimenovanje .ms-*pripomočkov v 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 ),
    ),
  )
);

Odstranite pripomočke

Odstranite katerega koli od privzetih pripomočkov tako, da nastavite ključ skupine na null. Na primer, če želite odstraniti vse naše widthpripomočke, ustvarite $utilities map-mergein dodajte "width": nullznotraj.

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

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

Odstrani pripomoček v RTL

Nekateri robovi otežujejo oblikovanje RTL , na primer prelomi vrstic v arabščini. Tako lahko pripomočke izpustite iz izhoda RTL, tako da nastavite rtlmožnost na false:

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

Izhod:

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

To ne izpiše ničesar v RTL, zahvaljujoč nadzorni direktivi RTLCSSremove .