Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
in English

API IwUlO

API IwUlO jẹ ohun elo ti o da lori Sass lati ṣe ipilẹṣẹ awọn kilasi iwulo.

Lori iwe yi

Awọn ohun elo Bootstrap ti wa ni ipilẹṣẹ pẹlu API IwUlO wa ati pe o le ṣee lo lati yipada tabi fa eto aiyipada ti awọn kilasi ohun elo wa nipasẹ Sass. API IwUlO wa da lori lẹsẹsẹ awọn maapu Sass ati awọn iṣẹ fun ti ipilẹṣẹ awọn idile ti awọn kilasi pẹlu awọn aṣayan pupọ. Ti o ko ba mọ pẹlu awọn maapu Sass, ka soke lori awọn iwe aṣẹ Sass osise lati bẹrẹ.

Maapu naa ni gbogbo awọn ohun elo wa ati pe lẹhinna o dapọ mọ maapu $utilitiesaṣa rẹ , ti o ba wa. $utilitiesMaapu IwUlO ni atokọ bọtini kan ti awọn ẹgbẹ IwUlO eyiti o gba awọn aṣayan wọnyi:

Aṣayan Iru Apejuwe
property Ti beere fun Orukọ ohun-ini naa, eyi le jẹ okun tabi ọpọlọpọ awọn okun (fun apẹẹrẹ, awọn paddings petele tabi awọn ala).
values Ti beere fun Akojọ awọn iye, tabi maapu kan ti o ko ba fẹ ki orukọ kilasi jẹ kanna bi iye naa. Ti o ba nulllo bi bọtini maapu, ko ṣe akojọpọ.
class iyan Iyipada fun orukọ kilasi ti o ko ba fẹ ki o jẹ kanna bi ohun-ini naa. Ni ọran ti o ko ba pese classbọtini ati propertybọtini jẹ opo ti awọn okun, orukọ kilasi yoo jẹ ipin akọkọ ti propertyorun naa.
state iyan Atokọ awọn iyatọ-kilasi pseudo bi :hovertabi :focuslati ṣe ipilẹṣẹ fun ohun elo naa. Ko si iye aiyipada.
responsive iyan Boolean n tọka ti awọn kilasi idahun nilo lati ṣe ipilẹṣẹ. falsenipa aiyipada.
rfs iyan Boolean lati jẹ ki isọdọtun omi ṣiṣẹ. Wo oju- iwe RFS lati wa bii eyi ṣe n ṣiṣẹ. falsenipa aiyipada.
print iyan Boolean n tọka ti awọn kilasi titẹ ba nilo lati ṣe ipilẹṣẹ. falsenipa aiyipada.
rtl iyan Boolean ti n tọka boya ohun elo yẹ ki o tọju ni RTL. truenipa aiyipada.

API salaye

Gbogbo awọn oniyipada ohun elo ni a ṣafikun si $utilitiesoniyipada laarin iwe aṣa wa _utilities.scss. Ẹgbẹ kọọkan ti awọn ohun elo n wo nkan bii eyi:

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

Eyi ti o jade awọn wọnyi:

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

Aṣa kilasi ìpele

Lo classaṣayan lati yi ìpele kilasi pada ti a lo ninu CSS ti o ṣajọ:

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

Abajade:

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

Awọn ipinlẹ

Lo stateaṣayan lati ṣe ina awọn iyatọ-kilasi pseudo. Apeere pseudo-kilasi jẹ :hoverati :focus. Nigbati a ba pese atokọ ti awọn ipinlẹ, awọn orukọ kilasi ni a ṣẹda fun kilasi afarape yẹn. Fun apẹẹrẹ, lati yi opaity pada lori rababa, ṣafikun state: hoverati pe iwọ yoo wọle .opacity-hover:hoversinu CSS rẹ ti o ṣajọ.

Ṣe o nilo awọn kilasi pseudo-ọpọlọpọ? Lo akojọ awọn ipinlẹ ti o ya sọtọ aaye: state: hover focus.

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

Abajade:

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

Awọn ohun elo idahun

Ṣafikun responsiveBoolean lati ṣe ina awọn ohun elo ti o ṣe idahun (fun apẹẹrẹ, .opacity-md-25) kọja gbogbo awọn aaye fifọ .

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

Abajade:

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

Iyipada awọn ohun elo

Paarẹ awọn ohun elo ti o wa tẹlẹ nipa lilo bọtini kanna. Fún àpẹrẹ, tí o bá fẹ́ kíláàsì ìṣàfikún àkúnwọ́sílẹ̀ ìdáhùn, o le ṣe èyí:

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

Muu printaṣayan ṣiṣẹ yoo tun ṣe agbekalẹ awọn kilasi iwulo fun titẹjade, eyiti a lo laarin @media print { ... }ibeere media nikan.

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

Abajade:

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

Pataki

Gbogbo awọn ohun elo ti ipilẹṣẹ nipasẹ API pẹlu !importantlati rii daju pe wọn bori awọn paati ati awọn kilasi iyipada bi a ti pinnu. O le yi eto yii pada ni agbaye pẹlu $enable-important-utilitiesoniyipada (aiyipada si true).

Lilo API

Ni bayi ti o mọ bi API awọn ohun elo ṣe n ṣiṣẹ, kọ ẹkọ bi o ṣe le ṣafikun awọn kilasi aṣa tirẹ ki o tun awọn ohun elo aifọwọṣe wa.

Ṣafikun awọn ohun elo

Awọn ohun elo tuntun le ṣe afikun si $utilitiesmaapu aiyipada pẹlu map-merge. Rii daju pe awọn faili Sass ti a beere ati _utilities.scssti wa ni akowọle wọle ni akọkọ, lẹhinna lo map-mergelati ṣafikun awọn ohun elo afikun rẹ. Fun apẹẹrẹ, eyi ni bii o ṣe le ṣafikun ohun elo idahun cursorpẹlu awọn iye mẹta.

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

Ṣatunṣe awọn ohun elo

$utilitiesṢe atunṣe awọn ohun elo to wa ninu maapu aiyipada pẹlu map-getati map-mergeawọn iṣẹ. Ninu apẹẹrẹ ni isalẹ, a n ṣafikun iye afikun si awọn widthohun elo. Bẹrẹ pẹlu ibẹrẹ map-mergeati lẹhinna pato iru ohun elo ti o fẹ yipada. Lati ibẹ, mu "width"maapu itẹ-ẹiyẹ pẹlu map-getlati wọle si ati ṣatunṣe awọn aṣayan ati iye ti ohun elo naa.

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

Mu idahun ṣiṣẹ

O le mu awọn kilasi idahun ṣiṣẹ fun eto awọn ohun elo to wa ti ko ṣe idahun lọwọlọwọ nipasẹ aiyipada. Fun apẹẹrẹ, lati jẹ ki awọn borderkilasi ni idahun:

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

Eyi yoo ṣe ipilẹṣẹ awọn iyatọ idahun ti .borderati .border-0fun aaye fifọ kọọkan. CSS rẹ ti ipilẹṣẹ yoo dabi eyi:

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

Fun lorukọ mii awọn ohun elo

Ti o padanu awọn ohun elo v4, tabi lo si apejọ lorukọ miiran? Awọn ohun elo API le ṣee lo lati bori abajade classti ohun elo ti a fifun—fun apẹẹrẹ, lati tunrukọ .ms-*awọn ohun elo si atijọ .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 ),
    ),
  )
);

Yọ awọn ohun elo

Yọ eyikeyi awọn ohun elo aiyipada kuro nipa tito bọtini ẹgbẹ si null. Fun apẹẹrẹ, lati yọ gbogbo awọn widthohun elo wa kuro, ṣẹda kan $utilities map-mergeki o ṣafikun "width": nulllaarin.

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

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

Yọ IwUlO ni RTL

Diẹ ninu awọn ọran eti jẹ ki aṣa aṣa RTL nira , gẹgẹbi awọn fifọ laini ni Arabic. Nitorinaa awọn ohun elo le jẹ silẹ lati iṣelọpọ RTL nipa tito rtlaṣayan si false:

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

Abajade:

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

Eyi ko ṣejade ohunkohun ninu RTL, o ṣeun si itọsọna iṣakoso RTLCSSremove .