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	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, a yi hlengeletiwi.
`class`	Hlawula	Variable ya vito ra tlilasi loko u nga lavi leswaku ri fana na nhundzu. Loko swi ta endleka leswaku u nga nyiki `class`xilotlelo naswona `property`xilotlelo i array ya tintambhu, vito ra tlilasi ri ta va elemente yo sungula ya `property`array.
`state`	Hlawula	Nxaxamelo wa ti pseudo-class variants ku fana na `:hover`kumbe `:focus`ku generate for the utility. Ku hava ntikelo wa xiviri.
`responsive`	Hlawula	Boolean leyi kombisaka loko titlilasi leti hlamulaka ti lava ku endliwa. `false`hi ku tiyimisela.
`rfs`	Hlawula	Boolean ku endla leswaku ku va na ku ringanisiwa nakambe ka mati. Languta eka tluka ra RFS ku kuma leswaku leswi swi tirha njhani. `false`hi ku tiyimisela.
`print`	Hlawula	Boolean leyi kombisaka loko titlilasi to gandlisa ti lava ku endliwa. `false`hi ku tiyimisela.
`rtl`	Hlawula	Boolean leyi kombisaka loko vukorhokeri byi fanele ku hlayisiwa eka RTL. `true`hi ku tiyimisela.

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

Xirhangi xa tlilasi ya ntolovelo

Tirhisa classnhlawulo ku cinca xirhangi xa tlilasi lexi tirhisiweke eka CSS leyi hlengeletiweke:

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

Vuyelo: .

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

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

Switirhisiwa leswi hlamulaka

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 cinca switirhisiwa

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

Switirhisiwa swo 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.

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

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

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

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

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

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

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

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Susa switirhisiwa swa vukorhokeri

Susa xin’wana ni xin’wana xa switirhisiwa swa ntolovelo hi ku veka xilotlelo xa ntlawa eka null. Hi xikombiso, ku susa widthswitirhisiwa swa hina hinkwaswo, endla a $utilities map-mergeivi u engetela "width": nullendzeni.

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

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

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 .