Utility API

API yothandiza ndi chida cha Sass chopangira makalasi othandizira.

Patsamba ili

Zida za Bootstrap zimapangidwa ndi API yathu yogwiritsira ntchito ndipo zitha kugwiritsidwa ntchito kusintha kapena kukulitsa makalasi athu okhazikika kudzera pa Sass. API yathu yogwiritsira ntchito idakhazikitsidwa pamapu angapo a Sass ndi ntchito zopangira mabanja amkalasi ndi zosankha zosiyanasiyana. Ngati simukudziŵa mamapu a Sass, werengani pamakalata ovomerezeka a Sass kuti muyambe.

Mapuwa $utilitiesali ndi zofunikira zathu zonse ndipo pambuyo pake amaphatikizidwa ndi $utilitiesmapu anu, ngati alipo. Mapu ogwiritsira ntchito ali ndi mndandanda wamagulu omwe amavomereza zotsatirazi:

Njira	Mtundu	Mtengo wofikira	Kufotokozera
`property`	Chofunikira	-	Dzina la malo, ichi chikhoza kukhala chingwe kapena mndandanda wa zingwe (mwachitsanzo, zopingasa zopingasa kapena m'mphepete).
`values`	Chofunikira	-	Mndandanda wamakhalidwe, kapena mapu ngati simukufuna kuti dzina la kalasi lifanane ndi mtengo wake. Ngati `null`agwiritsidwa ntchito ngati kiyi yamapu, samapangidwa.
`class`	Zosankha	null	Dzina la kalasi yopangidwa. Ngati sichinaperekedwe ndipo `property`ili ndi zingwe zambiri, `class`idzasintha kukhala gawo loyamba la `property`gululo.
`css-var`	Zosankha	`false`	Boolean kupanga zosintha za CSS m'malo mwa malamulo a CSS.
`local-vars`	Zosankha	null	Mapu amitundu yosiyanasiyana ya CSS kuti apange kuwonjezera pa malamulo a CSS.
`state`	Zosankha	null	Mndandanda wamitundu yabodza (monga, `:hover`kapena `:focus`) yopanga.
`responsive`	Zosankha	`false`	Boolean kusonyeza ngati makalasi omvera ayenera kupangidwa.
`rfs`	Zosankha	`false`	Boolean kuti muthe kuyambiranso kwamadzi ndi RFS .
`print`	Zosankha	`false`	Boolean ikuwonetsa ngati makalasi osindikizira akufunika kupangidwa.
`rtl`	Zosankha	`true`	Boolean yosonyeza ngati zofunikira ziyenera kusungidwa mu RTL.

API anafotokoza

Zosintha zonse zothandizira zimawonjezedwa ku $utilitieszosinthika mkati mwa _utilities.scssstylesheet yathu. Gulu lirilonse la zothandizira limawoneka motere:

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

Zomwe zimatulutsa zotsatirazi:

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

Katundu

Kiyi yofunikira propertyiyenera kukhazikitsidwa pazida zilizonse, ndipo iyenera kukhala ndi katundu wovomerezeka wa CSS. Chida ichi chimagwiritsidwa ntchito pazida zomwe zidapangidwa. Kiyiyo classikasiyidwa, imagwiranso ntchito ngati dzina la kalasi yokhazikika. Taganizirani text-decorationzothandiza:

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

Zotulutsa:

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

Makhalidwe

Gwiritsani ntchito valueskiyi kuti mufotokoze zomwe zatchulidwazo propertyziyenera kugwiritsidwa ntchito m'mayina ndi malamulo omwe apangidwa. Itha kukhala mndandanda kapena mapu (okhazikitsidwa muzothandizira kapena mumtundu wa Sass).

Monga mndandanda, monga ndi text-decorationzothandiza :

values: none underline line-through

Monga mapu, monga ndi opacityzothandiza :

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

Monga kusintha kwa Sass komwe kumayika mndandanda kapena mapu, monga momwe zilili positionm'magwiritsidwe athu :

values: $position-values

Kalasi

Gwiritsani ntchito classmwayiwu kuti musinthe prefix ya kalasi yomwe imagwiritsidwa ntchito mu CSS yophatikizidwa. Mwachitsanzo, kusintha kuchokera .opacity-*ku .o-*:

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

Zotulutsa:

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

CSS zosinthika zothandizira

Khazikitsani njira ya css-varboolean truendipo API ipanga zosintha za CSS zapafupi kwa osankhidwa omwe apatsidwa m'malo mwa property: valuemalamulo omwe mwachizolowezi. Ganizirani .text-opacity-*zofunikira zathu:

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

Zotulutsa:

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

Zosintha zapa CSS

Gwiritsani ntchito local-varsmwayiwu kuti mutchule mapu a Sass omwe angapangire zosintha za CSS m'gulu la utility class. Chonde dziwani kuti pangafunike ntchito yowonjezera kuti mugwiritse ntchito zosintha za CSS m'malamulo opangidwa ndi CSS. Mwachitsanzo, taganizirani .bg-*zofunikira zathu:

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

Zotulutsa:

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

Mayiko

Gwiritsani ntchito statemwayiwu kuti mupange zosiyana za pseudo-class. Zitsanzo za pseudo-class :hoverndi :focus. Mndandanda wa mayiko ukaperekedwa, mayina amakalasi amapangidwa a kalasi yabodza. Mwachitsanzo, kuti musinthe kuwala pa hover, onjezani state: hoverndipo mudzalowa .opacity-hover:hovermu CSS yanu yopangidwa.

Mukufuna makalasi abodza angapo? Gwiritsani ntchito mndandanda wa mayiko: state: hover focus.

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

Zotulutsa:

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

Womvera

Onjezani responsiveboolean kuti mupange zida zoyankhira (mwachitsanzo, .opacity-md-25) pazovuta zonse .

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

Zotulutsa:

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

Sindikizani

Kutsegula mwayiwu printkumapangitsanso makalasi ofunikira kuti asindikizidwe, omwe amangogwiritsidwa ntchito @media print { ... }pazofunsa zapa media.

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

Zotulutsa:

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

Kufunika

Zothandizira zonse zopangidwa ndi API zikuphatikiza !importantkuwonetsetsa kuti zikupitilira zigawo ndi makalasi osintha momwe amafunira. Mutha kusintha izi padziko lonse lapansi $enable-important-utilitiesndikusintha (zosasintha kukhala true).

Kugwiritsa ntchito API

Tsopano popeza mukudziwa momwe zida za API zimagwirira ntchito, phunzirani momwe mungawonjezere makalasi anu ndikusintha zida zathu zokhazikika.

Chotsani zofunikira

Chotsani zida zomwe zilipo kale pogwiritsa ntchito kiyi yomweyo. Mwachitsanzo, ngati mukufuna makalasi owonjezera omvera osefukira, mutha kuchita izi:

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

Onjezani zofunikira

Zatsopano zitha kuwonjezedwa $utilitiespamapu okhazikika ndi a map-merge. Onetsetsani kuti mafayilo athu ofunikira a Sass ndi _utilities.scsskutumizidwa kaye, kenako gwiritsani ntchito map-mergekuwonjezera zina zowonjezera. Mwachitsanzo, nayi momwe mungawonjezere ntchito cursoryomvera yokhala ndi mfundo zitatu.

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

Sinthani zothandiza

$utilitiesSinthani zida zomwe zilipo pamapu okhazikika map-getndi map-mergentchito. Muchitsanzo chomwe chili m'munsimu, tikuwonjezera phindu kuzinthu widthzothandizira. Yambani ndi choyambirira map-mergendiyeno tchulani chida chomwe mukufuna kusintha. Kuchokera pamenepo, tengani "width"mapu omwe ali nawo map-getkuti mupeze ndikusintha zomwe mungagwiritse ntchito komanso zofunikira zake.

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

Yambitsani kuyankha

Mutha kuyatsa makalasi omvera pagulu lazinthu zomwe zilipo zomwe sizikugwira ntchito mwachisawawa. Mwachitsanzo, kupanga bordermakalasi kulabadira:

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

Izi tsopano zipangitsa kusiyanasiyana komvera .borderkomanso .border-0pagawo lililonse. CSS yanu yopangidwa idzawoneka motere:

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

Sinthani dzina lothandizira

Zida za v4 zomwe zikusowa, kapena zomwe munazolowera kutchuthi zina? Zothandizira API zitha kugwiritsidwa ntchito kuwongolera zomwe classzaperekedwa - mwachitsanzo, kutchulanso .ms-*zida kukhala oldish .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 ),
    ),
  )
);

Chotsani zofunikira

Chotsani zida zilizonse zosasinthika pokhazikitsa kiyi ya gulu ku null. Mwachitsanzo, kuchotsa widthzofunikira zathu zonse, pangani a $utilities map-mergendi kuwonjezera "width": nullmkati.

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

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

Chotsani zofunikira mu RTL

Milandu ina yam'mphepete imapangitsa masitayilo a RTL kukhala ovuta , monga kutha kwa mizere mu Chiarabu. Chifukwa chake zothandizira zitha kuchotsedwa kuchokera ku RTL pokhazikitsa rtlnjira yoti false:

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

Zotulutsa:

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

Izi sizitulutsa kalikonse mu RTL, chifukwa cha malangizo a RTLCSSremove .