API ya vukorhokeri

API ya vukorhokeri i xitirhisiwa lexi simekiweke eka Sass ku tumbuluxa titlilasi ta vukorhokeri.

Eka tluka leri

Switirhisiwa swa Bootstrap swi endliwa hi API ya hina ya vukorhokeri naswona swi nga tirhisiwa ku cinca kumbe ku andlala sete ya hina ya ntolovelo ya titlilasi ta vukorhokeri hi ku tirhisa Sass. API ya hina ya vukorhokeri yi sekeriwe eka nxaxamelo wa mimepe ya Sass na mintirho yo tumbuluxa mindyangu ya titlilasi leti nga na swihlawulekisi swo hambana. Loko u nga tolovelanga mimepe ya Sass, hlaya ehenhla eka ti -doc ta ximfumo ta Sass ku sungula.

Mepe $utilitieswu na switirhisiwa swa hina hinkwaswo naswona endzhaku wu hlanganisiwa na $utilitiesmepe wa wena wa ntolovelo, loko wu ri kona. Mepe wa switirhisiwa wu na nxaxamelo lowu nga na swilotlelo wa mintlawa ya switirhisiwa leswi amukelaka swihlawulekisi leswi landzelaka:

Ndlela	Muxaka	Nhlayo ya xiviri	Nhlamuselo
`property`	Laveka	– .	Vito ra nhundzu, leswi swinga va ntambhu kumbe nxaxamelo wa tintambhu (xikombiso, ti horizontal paddings kumbe margins).
`values`	Laveka	– .	Nxaxamelo wa mimpimo, kumbe mepe loko u nga lavi leswaku vito ra tlilasi ri fana na ntikelo. Loko `null`yi tirhisiwa tanihi xilotlelo xa mepe, `class`a yi prepended eka vito ra tlilasi.
`class`	Hlawula	hava	Vito ra tlilasi leyi tumbuluxiweke. Loko swi nga nyikiwanga naswona `property`ku ri nxaxamelo wa tintambhu, `class`wu ta default eka elemente yo sungula ya `property`nxaxamelo. Loko swi nga nyikiwanga naswona `property`ku ri ntambhu, `values`swilotlelo swi tirhisiwa eka `class`mavito.
`css-var`	Hlawula	`false`	Boolean ku tumbuluxa swilo leswi cinca-cincaka swa CSS ematshan’wini ya milawu ya CSS.
`css-variable-name`	Hlawula	hava	Vito ra ntolovelo leri nga riki na xirhangi xa xihlawulekisi xa CSS endzeni ka sete ya milawu.
`local-vars`	Hlawula	hava	Mepe wa swilo leswi cinca-cincaka swa CSS swa laha kaya ku tumbuluxa ku engetela eka milawu ya CSS.
`state`	Hlawula	hava	Nxaxamelo wa swihlawulekisi swa tlilasi ya vuxisi (xikombiso, `:hover`kumbe `:focus`) ku tumbuluxa.
`responsive`	Hlawula	`false`	Boolean leyi kombisaka loko titlilasi leti hlamulaka ti fanele ku endliwa.
`rfs`	Hlawula	`false`	Boolean ku endla leswaku ku va na ku ringanisiwa nakambe ka mati hi RFS .
`print`	Hlawula	`false`	Boolean leyi kombisaka loko titlilasi to gandlisa ti lava ku endliwa.
`rtl`	Hlawula	`true`	Boolean leyi kombisaka loko vukorhokeri byi fanele ku hlayisiwa eka RTL.

API yi hlamuseriwile

Swilo hinkwaswo leswi cinca-cincaka swa vukorhokeri swi engeteriwa eka $utilitiesxihlawulekisi endzeni ka _utilities.scssxitayili xa hina. Ntlawa wun’wana ni wun’wana wa switirhisiwa wu languteka hi ndlela leyi:

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

Lexi humesaka leswi landzelaka:

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

Nhundzu

Xilotlelo lexi lavekaka propertyxi fanele ku vekiwa eka vukorhokeri byihi na byihi, naswona xi fanele ku va na nhundzu ya CSS leyi tirhaka. Nhundzu leyi yi tirhisiwa eka sete ya milawu ya xitirhisiwa lexi endliweke. Loko classxilotlelo xi tshikiwile, xi tlhela xi tirha tanihi vito ra tlilasi ya ntolovelo. Anakanya hi ndlela leyi text-decorationpfunaka ha yona:

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

Vuyelo: .

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

Mimpimanyeto

Tirhisa valuesxilotlelo ku boxa leswaku hi yihi mimpimo ya leswi boxiweke leyi propertyfaneleke ku tirhisiwa eka mavito ya tlilasi leyi endliweke na milawu. Ku nga va nxaxamelo kumbe mepe (yi vekiwile eka switirhisiwa kumbe eka xihlawulekisi xa Sass).

Tanihi nxaxamelo, ku fana na text-decorationswitirhisiwa :

values: none underline line-through

Tanihi mepe, ku fana na opacityswitirhisiwa :

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

Tanihi xihlawulekisi xa Sass lexi vekaka nxaxamelo kumbe mepe, tanihi le ka positionswitirhisiwa swa hina :

values: $position-values

Tlilasi

Tirhisa classnhlawulo ku cinca xirhangi xa tlilasi lexi tirhisiweke eka CSS leyi hlengeletiweke. Xikombiso, ku cinca ku suka eka .opacity-*ku ya eka .o-*:

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

Vuyelo: .

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

Loko class: null, yi humesa titlilasi ta xin’wana ni xin’wana xa valuesswilotlelo:

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

Vuyelo: .

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

Switirhisiwa swa CSS leswi cinca-cincaka

Seta css-varnhlawulo wa boolean eka truenaswona API yi ta humesa swilo leswi cinca-cincaka swa CSS swa laha kaya swa xihlawulekisi lexi nyikiweke ematshan’wini ya property: valuemilawu ya ntolovelo. Engetela xihlawuhlawu css-variable-nameku veka vito ra xihlawulekisi xa CSS lexi hambaneke ku tlula vito ra tlilasi.

Anakanya hi .text-opacity-*switirhisiwa swa hina. Loko hi engetela css-variable-namenhlawulo, hi ta kuma vuhumelerisi bya ntolovelo.

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

Vuyelo: .

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

Swilo leswi cinca-cincaka swa CSS swa laha kaya

Tirhisa local-varsnhlawulo ku boxa mepe wa Sass lowu nga ta humesa swilo leswi cinca-cincaka swa CSS swa laha kaya endzeni ka sete ya milawu ya tlilasi ya vukorhokeri. Hi kombela u xiya leswaku swi nga ha lava ntirho wo engetela ku dya swilo sweswo leswi cinca-cincaka swa CSS swa laha kaya eka milawu ya CSS leyi endliweke. Hi xikombiso, xiya swilo leswi hi .bg-*swi tirhisaka:

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

Vuyelo: .

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

Mimfumo

Tirhisa statenhlawulo ku humesa ku hambana ka tlilasi ya vuxisi. Xikombiso xa titlilasi ta vuxisi i :hoverna :focus. Loko nxaxamelo wa swiyimo wu nyikiwile, ku endliwa mavito ya titlilasi ya tlilasi yoleyo ya vuxisi. Xikombiso, ku cinca opacity eka hover, engetela state: hovernaswona u ta nghena .opacity-hover:hovereka CSS ya wena leyi hlengeletiweke.

Xana u lava titlilasi to tala ta vuxisi? Tirhisa nxaxamelo wa swiyimo lowu hambanisiweke hi xivandla: state: hover focus.

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

Vuyelo: .

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

Ku hlamula

Engetela responsiveboolean ku tumbuluxa switirhisiwa leswi hlamulaka (xikombiso, .opacity-md-25) ku tsemakanya tindhawu hinkwato to wisa .

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

Vuyelo: .

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

Ku gandlisa

Ku pfumelela printnhlawulo swi ta tlhela swi humesa titlilasi ta vukorhokeri byo gandlisa, leti tirhisiwaka ntsena endzeni ka @media print { ... }xivutiso xa midiya.

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

Vuyelo: .

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

Nkoka

Switirhisiwa hinkwaswo leswi endliweke hi API swi katsa !importantku tiyisisa leswaku swi tlula swiphemu na titlilasi ta vacinci tanihilaha swi kunguhatiweke hakona. U nga cinca-cinca xiyimiso lexi emisaveni hinkwayo hi $enable-important-utilitiesxihlawulekisi (xihlawulekisi eka true).

Ku tirhisa API

Sweswi u toloveleke ndlela leyi API ya switirhisiwa yi tirhaka ha yona, dyondza ndlela yo engetela titlilasi ta wena ta ntolovelo ni ku cinca switirhisiwa swa hina swa ntolovelo.

Ku tlula switirhisiwa swa vukorhokeri

Tlula switirhisiwa leswi nga kona hi ku tirhisa xilotlelo lexi fanaka. Xikombiso, loko u lava titlilasi to engetela ta vukorhokeri bya ku tala loku hlamulaka, u nga endla leswi:

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

Engetela switirhisiwa swa vukorhokeri

Switirhisiwa leswintshwa swi nga engeteriwa eka $utilitiesmepe wa ntolovelo hi map-merge. Tiyisisa leswaku tifayela ta hina ta Sass leti lavekaka naswona _utilities.scssti nghenisiwa ku sungula, kutani u tirhisa map-mergeku engetela switirhisiwa swa wena swo engetela. Xikombiso, hi leyi ndlela yo engetela xitirhisiwa xo hlamula lexi cursornga na mimpimo yinharhu.

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

Cinca switirhisiwa swa vukorhokeri

Cinca switirhisiwa leswi nga kona eka $utilitiesmepe wa ntolovelo hi map-getna map-mergemintirho. Eka xikombiso lexi nga laha hansi, hi engetela ntikelo wo engetela eka widthswitirhisiwa. Sungula hi masungulo map-mergeivi u boxa leswaku u lava ku cinca xitirhisiwa xihi. "width"Ku suka kwalaho, teka mepe lowu pfanganisiweke hi map-getku fikelela ni ku cinca swihlawulekisi ni mimpimo ya xitirhisiwa.

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

Endla leswaku ku va ni ku hlamula

U nga endla leswaku titlilasi leti hlamulaka ti tirha eka sete leyi nga kona ya switirhisiwa leswi nga hlamuriki sweswi hi ku tiyimisela. Hi xikombiso, ku endla leswaku bordertitlilasi ti hlamula:

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

Leswi sweswi swi ta humesa ku hambana loku hlamulaka ka .borderna .border-0eka breakpoint yin’wana na yin’wana. CSS ya wena leyi endliweke yi ta languteka hi ndlela leyi:

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

Tlhela u thya mavito ya switirhisiwa

Switirhisiwa swa v4 leswi kayivelaka, kumbe swi toloverile ntwanano wun’wana wo thya mavito? API ya switirhisiwa yi nga tirhisiwa ku tlula mbuyelo classwa xitirhisiwa lexi nyikiweke—xikombiso, ku thya .ms-*switirhisiwa mavito mavito ya khale .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";

Susa switirhisiwa swa vukorhokeri

Susa xin'wana na xin'wana xa switirhisiwa swa ntolovelo hi map-remove()ntirho 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";

U nga ha tlhela u tirhisa map-merge()ntirho wa Sass ivi u veka xilotlelo xa ntlawa eka nullku susa xitirhisiwa.

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

Engetela, susa, cinca

U nga engetela, u susa, ni ku cinca switirhisiwa swo tala hinkwaswo hi nkarhi wun’we hi map-merge()ntirho wa Sass . Hi leyi ndlela leyi u nga hlanganisaka swikombiso leswi hundzeke ha yona eka mepe wun’we lowukulu.

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

Susa vukorhokeri eka RTL

Timhaka tin’wana ta le tlhelo ti endla leswaku ku endla switayele swa RTL swi tika , swo tanihi ku tshoveka ka milayeni hi Xiarabu. Xisweswo switirhisiwa swi nga susiwa eka vuhumelerisi bya RTL hi ku veka rtlnhlawulo eka false:

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

Vuyelo: .

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

Leswi a swi humesi nchumu eka RTL, hikwalaho ka xileriso xa vulawuri xa RTLCSSremove .