API ya mohola

API ya utility ke sedirišwa seo se theilwego go Sass go tšweletša diklase tša utility.

Letlakaleng le

Didirišwa tša Bootstrap di tšweletšwa ka API ya rena ya didirišwa gomme di ka šomišwa go fetoša goba go katološa sete ya rena ya go se fetoge ya diklase tša didirišwa ka Sass. API ya rena ya utility e theilwe godimo ga letoto la dimmapa tša Sass le mešomo ya go tšweletša malapa a diklase tšeo di nago le dikgetho tše di fapanego. Ge e ba o sa tlwaelana le dimmapa tša Sass, bala godimo go di- doc tša semmušo tša Sass go thoma.

Mmapa $utilitieso na le didirišwa tša rena ka moka gomme ka morago o kopanywa le $utilitiesmmapa wa gago wa tlwaelo, ge e ba o le gona. Mmapa wa utility o na le lenaneo leo le nago le dinotlelo la dihlopha tša utility tšeo di amogelago dikgetho tše di latelago:

Kgetho	Mohuta	Tlhalošo
`property`	Nyakegago	Leina la thepa, se e ka ba thapo goba lenaneo la dithapo (mohlala, dipadding tše di rapaletšego goba mapheko).
`values`	Nyakegago	Lenaneo la boleng, goba mmapa ge o sa nyake gore leina la sehlopha le swane le boleng. Ge `null`e šomišwa bjalo ka senotlelo sa mmapa, ga e kgoboketšwe.
`class`	Boikgethelo	Phetogo ya leina la sehlopha ge o sa nyake gore e swane le thepa. Ge go ka direga gore o sa neelane ka `class`senotlelo gomme `property`senotlelo ke lenaneo la dithapo, leina la sehlopha e tla ba elemente ya mathomo ya `property`lenaneo.
`state`	Boikgethelo	Lenaneo la pseudo-sehlopha dipharologanyo joaloka `:hover`kapa `:focus`ho hlahisa bakeng sa utility. Ga go na boleng bja go se fetoge.
`responsive`	Boikgethelo	Boolean e laetša ge e ba diklase tše di arabelago di swanetše go tšweletšwa. `false`ka go ikemela.
`rfs`	Boikgethelo	Boolean go kgontšha go lekanyetša gape seela. Lebelela letlakala la RFS go hwetša gore se se šoma bjang. `false`ka go ikemela.
`print`	Boikgethelo	Boolean e laetša ge e ba diklase tša go phrintha di swanetše go tšweletšwa. `false`ka go ikemela.
`rtl`	Boikgethelo	Boolean e bontšha ge e ba utility e swanetše go bolokwa ka go RTL. `true`ka go ikemela.

API e hlalositše

Diphetogo ka moka tša mohola di tlaleletšwa go $utilitiesphetogo ka gare ga letlakala la rena _utilities.scssla setaele. Sehlopha se sengwe le se sengwe sa didirišwa tša motheo se lebelega selo se sengwe se se swanago le se:

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

Eo e ntšhago tše di latelago:

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

Sehlongwapele sa sehlopha sa tlwaelo

Šomiša classkgetho go fetoša hlogo ya sehlopha yeo e šomišitšwego ka go CSS ye e kgobokeditšwego:

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

Ditšweletšwa: .

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

Dilete

Šomiša statekgetho go tšweletša diphetogo tša maemo a maaka. Mohlala wa diklase tša maaka ke :hoverle :focus. Ge lenaneo la dilete le fiwa, maina a diklase a hlolwa bakeng sa sehlopha seo sa maaka. Go fa mohlala, go fetoša opacity ka hover, oketša state: hovergomme o tla hwetša .opacity-hover:hoverka gare ga CSS ya gago ye e kgobokeditšwego.

O hloka dihlopha tše dintši tša maaka? Šomiša lenaneo la maemo leo le arotšwego ka sekgoba: state: hover focus.

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

Ditšweletšwa: .

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

Didirišwa tše di arabelago

Oketša responsiveboolean go tšweletša didirišwa tše di arabelago (mohlala, .opacity-md-25) go ralala le dintlha ka moka tša go kgaotša .

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

Ditšweletšwa: .

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

Go fetola didirišwa tša go thuša

Tloša didirišwa tše di lego gona ka go diriša senotlelo se se swanago. Go fa mohlala, ge o nyaka diklase tša tlaleletšo tša go tlala tša go arabela tša go tlala, o ka dira se:

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

Didirišwa tša go phrintha

Go kgontšha printkgetho go tla tšweletša gape diklase tša mohola tša go phrintha, tšeo di dirišwago fela ka gare ga @media print { ... }potšišo ya boraditaba.

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

Ditšweletšwa: .

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

Bohlokwa

Didirišwa ka moka tšeo di tšweleditšwego ke API di akaretša !importantgo netefatša gore di tloša dikarolo le dihlopha tša sefetoši bjalo ka ge di reretšwe. O ka fetola peakanyo ye lefaseng ka bophara ka $enable-important-utilitiesphetogo (defaults to true).

Go diriša API

Bjale ka ge o tlwaelane le kamoo API ya didirišwa e šomago ka gona, ithute kamoo o ka oketšago diklase tša gago tša tlwaelo le go fetoša didirišwa tša rena tša go se fetoge.

Oketša didirišwa

Didirišwa tše mpsha di ka okeletšwa $utilitiesmmapeng wa go se fetoge ka map-merge. Netefatša gore difaele tša rena tša Sass tše di nyakegago gomme _utilities.scssdi tsenywa ka ntle pele, ke moka o šomiše map-mergego oketša didirišwa tša gago tša tlaleletšo. Go fa mohlala, mo ke kamoo o ka oketšago cursorutility ye e arabelago ka dikelo tše tharo.

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

Fetoša didirišwa

Fetoša didirišwa tše di lego gona ka $utilitiesmmapeng wa go se fetoge ka map-getle map-mergemešomo. Mohlaleng wo o lego ka mo tlase, re tlaleletša ka boleng bja tlaleletšo go widthdidirišwa. Thoma ka mathomo map-mergegomme o laetše gore ke utility efe yeo o nyakago go e fetoša. Go tloga moo, lata "width"mmapa wo o tsentšwego ka gare ga sehlaga ka map-getgo fihlelela le go fetoša dikgetho le dikelo tša utility.

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

Kgontšha go arabela

O ka kgontšha diklase tše di arabelago bakeng sa sete ye e lego gona ya didirišwa tšeo ga bjale di sa arabelego ka go ikemela. Ka mohlala, go dira gore borderdiklase di arabele:

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

Se bjale se tla tšweletša diphetogo tše di arabelago tša .borderle .border-0bakeng sa ntlha ye nngwe le ye nngwe ya go kgaotša. CSS ya gago ye e tšweleditšwego e tla lebelega ka tsela ye:

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

Rena leina lefsa la didirišwa

Didirišwa tša v4 tše di sego gona, goba di tlwaetše kopano e nngwe ya go rea maina? API ya didirišwa e ka šomišwa go tloša sephetho classsa sedirišwa se se filwego—mohlala, go reela .ms-*didirišwa leina lefsa go ya kgale .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 ),
    ),
  )
);

Tlosa didirišwa tša go thuša

Tloša efe goba efe ya didirišwa tša go se fetoge ka go beakanya senotlelo sa sehlopha go null. Ka mohlala, go tloša widthdidirišwa tša rena ka moka, hlama a $utilities map-mergegomme o oketše "width": nullka gare.

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

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

Tlosa utility ka RTL

Ba bang ba bohale melato etsa RTL setaele thata , tse kang mola kgaotsa ka Searabia. Ka go realo didirišwa di ka lahlwa go tšwa go ditšweletšwa tša RTL ka go beakanya rtlkgetho go false:

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

Ditšweletšwa: .

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

Se ga se tšweletše selo ka go RTL, ka lebaka la taelo ya taolo ya RTLCSSremove .