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	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	Zosintha za dzina la kalasi ngati simukufuna kuti likhale lofanana ndi katundu. Ngati simupereka `class`fungulo ndi `property`fungulo ndi mndandanda wa zingwe, dzina la kalasi lidzakhala chinthu choyamba cha `property`gululo.
`state`	Zosankha	Mndandanda wamitundu yongopeka yomwe ingakonde `:hover`kapena `:focus`yopangira zofunikira. Palibe mtengo wokhazikika.
`responsive`	Zosankha	Boolean kusonyeza ngati makalasi omvera ayenera kupangidwa. `false`mwachisawawa.
`rfs`	Zosankha	Boolean kuti muthe kutsitsa madzimadzi. Yang'anani pa tsamba la RFS kuti mudziwe momwe izi zimagwirira ntchito. `false`mwachisawawa.
`print`	Zosankha	Boolean ikuwonetsa ngati makalasi osindikizira akufunika kupangidwa. `false`mwachisawawa.
`rtl`	Zosankha	Boolean yosonyeza ngati zofunikira ziyenera kusungidwa mu RTL. `true`mwachisawawa.

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

Custom class prefix

Gwiritsani ntchito classmwayiwu kusintha prefix ya kalasi yomwe imagwiritsidwa ntchito mu CSS yophatikizidwa:

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

Zotulutsa:

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

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

Zothandizira zomvera

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

Kusintha zida

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

Sindikizani zida

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.

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 .