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	Boleng bja go se fetoge	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, `class`ga se prepended go leina la sehlopha.
`class`	Boikgethelo	ya lefela	Leina la sehlopha seo se tšweleditšwego. Ge e sa fiwa ebile `property`ke lenaneo la dithapo, `class`tla default go elemente ya mathomo ya `property`lenaneo. Ge e sa fiwa ebile `property`ke thapo, `values`dinotlelo di šomišwa bakeng sa `class`maina.
`css-var`	Boikgethelo	`false`	Boolean go tšweletša diphetogo tša CSS go e na le melawana ya CSS.
`css-variable-name`	Boikgethelo	ya lefela	Leina la tlwaelo leo le sa hlongwago bakeng sa phetogo ya CSS ka gare ga sete ya melao.
`local-vars`	Boikgethelo	ya lefela	Mmapa wa diphetogo tša CSS tša selegae go tšweletša go tlaleletša go melawana ya CSS.
`state`	Boikgethelo	ya lefela	Lenaneo la diphetogo tša maemo a maaka (mohlala, `:hover`goba `:focus`) go tšweletša.
`responsive`	Boikgethelo	`false`	Boolean e laetša ge e ba diklase tše di arabelago di swanetše go tšweletšwa.
`rfs`	Boikgethelo	`false`	Boolean go kgontšha go lekanyetša gape seela ka RFS .
`print`	Boikgethelo	`false`	Boolean e laetša ge e ba diklase tša go phrintha di swanetše go tšweletšwa.
`rtl`	Boikgethelo	`true`	Boolean e bontšha ge e ba utility e swanetše go bolokwa ka go RTL.

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 se lebelela 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; }

Thoto

Senotlelo se se nyakegago propertyse swanetše go bewa bakeng sa sedirišwa sefe goba sefe, gomme se swanetše go ba le thepa ya CSS ye e šomago. Thepa ye e šomišwa ka go sete ya melao ya utility ye e tšweleditšwego. Ge classsenotlelo se tlogetšwe, se šoma gape bjalo ka leina la sehlopha sa go se fetoge. Ela hloko text-decorationmohola:

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

Ditšweletšwa: .

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

Ditekanyetšo

Šomiša valuessenotlelo go laetša gore ke dikelo dife tša tše di laeditšwego tšeo di propertyswanetšego go šomišwa ka go maina a sehlopha tše di tšweleditšwego le melawana. E ka ba lenane kapa mmapa (beha ka utilities kapa ka Sass phetoho).

E le lenane, joaloka le text-decorationutilities :

values: none underline line-through

Bjalo ka mmapa, go swana le ka opacitydidirišwa :

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

Bjalo ka phetogo ya Sass yeo e beago lenaneo goba mmapa, bjalo ka ka go positiondidirišwa tša rena :

values: $position-values

Phapoši

Šomiša classkgetho go fetoša hlogo ya sehlopha ye e šomišitšwego ka go CSS ye e kgobokeditšwego. Mohlala, go fetola go tšwa .opacity-*go go ya go .o-*:

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

Ditšweletšwa: .

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

Ge e le gore class: null, e tšweletša diklase tša ye nngwe le ye nngwe ya valuesdinotlelo:

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

Ditšweletšwa: .

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

Didirišwa tša go fetoga tša CSS

Beakanya css-varkgetho ya boolean go truegomme API e tla tšweletša diphetogo tša CSS tša selegae tša mokgethi yo a filwego go e na le property: valuemelawana ya tlwaelo. Oketša kgetho css-variable-namego beakanya leina la phetogo ya CSS ye e fapanego go feta leina la sehlopha.

.text-opacity-*Ela hloko didirišwa tša rena tša motheo. Ge re ka oketša css-variable-namekgetho, re tla hwetša setšweletšwa sa tlwaelo.

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

Ditšweletšwa: .

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

Diphetogo tša CSS tša selegae

Šomiša local-varskgetho go laetša mmapa wa Sass wo o tlago tšweletša diphetogo tša CSS tša selegae ka gare ga sete ya melao ya sehlopha sa utility. Hle ela hloko gore go ka nyaka mošomo wa tlaleletšo go ja diphetogo tšeo tša selegae tša CSS ka melaong ya CSS ye e tšweleditšwego. Ka mohlala, ela hloko .bg-*didirišwa tša rena tša motheo:

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

Ditšweletšwa: .

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

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

Go arabela

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

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.

Tloša 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,
  ),
);

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/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";

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/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";

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/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";

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/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";

Tlosa didirišwa tša go thuša

Tloša efe goba efe ya didirišwa tša go se fetoge ka map-remove()mošomo wa 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";

O ka šomiša gape map-merge()mošomo wa Sass gomme wa beakanya senotlelo sa sehlopha go nullgo tloša sedirišwa.

@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";

Oketša, tloša, fetoša

O ka oketša, wa tloša, le go fetoša didirišwa tše dintši ka nako e tee ka map-merge()mošomo wa Sass . Ke ka fao o ka kopanyago mehlala ya peleng go ba mmapa o tee wo mogolo.

@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";

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 .