Utility API

API ya matumizi ni zana ya msingi ya Sass ya kutengeneza madarasa ya matumizi.

Katika ukurasa huu

Huduma za Bootstrap zinazalishwa na API yetu ya matumizi na zinaweza kutumika kurekebisha au kupanua seti yetu chaguomsingi ya madarasa ya matumizi kupitia Sass. API yetu ya matumizi inategemea mfululizo wa ramani na vipengele vya Sass vya kuzalisha familia za madarasa na chaguo mbalimbali. Ikiwa hujui ramani za Sass, soma kwenye hati rasmi za Sass ili kuanza.

Ramani $utilitiesina huduma zetu zote na baadaye itaunganishwa na $utilitiesramani yako maalum, ikiwa iko. Ramani ya matumizi ina orodha ya ufunguo ya vikundi vya matumizi ambavyo vinakubali chaguo zifuatazo:

Chaguo	Aina	Maelezo
`property`	Inahitajika	Jina la sifa, hii inaweza kuwa mfuatano au safu ya mifuatano (kwa mfano, padi za mlalo au pambizo).
`values`	Inahitajika	Orodha ya thamani, au ramani ikiwa hutaki jina la darasa liwe sawa na thamani. Ikiwa `null`inatumika kama ufunguo wa ramani, haijaundwa.
`class`	Hiari	Inaweza kubadilika kwa jina la darasa ikiwa hutaki liwe sawa na mali. Iwapo hautatoa `class`ufunguo na `property`ufunguo ni safu ya kamba, jina la darasa litakuwa kipengele cha kwanza cha `property`safu.
`state`	Hiari	Orodha ya vibadala vya aina bandia kama `:hover`au `:focus`kutengeneza kwa matumizi. Hakuna thamani chaguo-msingi.
`responsive`	Hiari	Boolean ikionyesha kama madarasa sikivu yanahitaji kuzalishwa. `false`kwa chaguo-msingi.
`rfs`	Hiari	Boolean kuwezesha upunguzaji wa maji. Angalia ukurasa wa RFS ili kujua jinsi hii inavyofanya kazi. `false`kwa chaguo-msingi.
`print`	Hiari	Boolean ikionyesha kama madarasa ya uchapishaji yanahitaji kuzalishwa. `false`kwa chaguo-msingi.
`rtl`	Hiari	Boolean ikionyesha ikiwa matumizi yanapaswa kuwekwa katika RTL. `true`kwa chaguo-msingi.

API ilieleza

Vigezo vyote vya matumizi huongezwa kwa $utilitieskutofautisha ndani ya laha zetu za _utilities.scssmitindo. Kila kikundi cha huduma kinaonekana kama hii:

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

Ambayo hutoa matokeo yafuatayo:

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

Kiambishi awali cha darasa maalum

Tumia classchaguo kubadilisha kiambishi awali cha darasa kinachotumika katika CSS iliyokusanywa:

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

Pato:

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

Mataifa

Tumia statechaguo kutoa tofauti za darasa bandia. Mfano madarasa ya uwongo ni :hoverna :focus. Wakati orodha ya majimbo inatolewa, majina ya darasa huundwa kwa darasa hilo bandia. Kwa mfano, ili kubadilisha uwazi kwenye kielelezo, ongeza state: hoverna utapata .opacity-hover:hoverCSS yako iliyokusanywa.

Je, unahitaji madarasa mengi ya uwongo? Tumia orodha iliyotenganishwa na nafasi ya majimbo: state: hover focus.

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

Pato:

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

Huduma za msikivu

Ongeza responsiveboolean ili kutoa huduma zinazoweza kuitikia (kwa mfano, .opacity-md-25) katika sehemu zote za kukatiza .

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

Pato:

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

Kubadilisha huduma

Batilisha huduma zilizopo kwa kutumia ufunguo sawa. Kwa mfano, ikiwa unataka madarasa ya ziada ya matumizi ya kufurika, unaweza kufanya hivi:

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

Chapisha huduma

Kuwasha printchaguo pia kutazalisha madarasa ya matumizi ya kuchapishwa, ambayo yanatumika tu ndani ya @media print { ... }hoja ya midia.

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

Pato:

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

Umuhimu

Huduma zote zinazozalishwa na API ni pamoja !importantna kuhakikisha zinabatilisha vipengele na madarasa ya kurekebisha kama ilivyokusudiwa. Unaweza kubadilisha mpangilio huu kimataifa na $enable-important-utilitiesutofautishaji (chaguo-msingi hadi true).

Kwa kutumia API

Kwa kuwa sasa unajua jinsi API ya huduma inavyofanya kazi, jifunze jinsi ya kuongeza madarasa yako maalum na urekebishe huduma zetu chaguomsingi.

Ongeza huduma

Huduma mpya zinaweza kuongezwa kwenye $utilitiesramani chaguo-msingi na map-merge. Hakikisha faili zetu zinazohitajika za Sass na _utilities.scsszinaletwa kwanza, kisha utumie map-mergekuongeza huduma zako za ziada. Kwa mfano, hapa kuna jinsi ya kuongeza cursormatumizi sikivu yenye thamani tatu.

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

Rekebisha huduma

$utilitiesRekebisha huduma zilizopo katika ramani chaguo-msingi map-getna map-mergevitendaji. Katika mfano ulio hapa chini, tunaongeza thamani ya ziada kwa widthhuduma. Anza na ya awali map-mergena kisha taja ni matumizi gani unataka kurekebisha. Kutoka hapo, leta "width"ramani iliyoorodheshwa nayo map-getili kufikia na kurekebisha chaguo na thamani za shirika.

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

Washa mwitikio

Unaweza kuwasha madarasa jibu kwa seti iliyopo ya huduma ambazo hazifanyi kazi kwa chaguomsingi kwa sasa. Kwa mfano, kufanya bordermadarasa kuitikia:

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

Hii sasa itazalisha tofauti sikivu za .borderna .border-0kwa kila sehemu ya kukanusha. CSS yako iliyotolewa itaonekana kama hii:

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

Badilisha jina la huduma

Je, umekosa huduma za v4, au umezoea mkusanyiko mwingine wa majina? API ya huduma inaweza kutumika kubatilisha matokeo classya matumizi fulani-kwa mfano, kubadili jina .ms-*la huduma kuwa 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 ),
    ),
  )
);

Ondoa huduma

Ondoa huduma zozote za msingi kwa kuweka ufunguo wa kikundi kwa null. Kwa mfano, ili kuondoa widthhuduma zetu zote, unda $utilities map-mergena uongeze "width": nullndani.

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

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

Ondoa matumizi katika RTL

Baadhi ya vipochi vya makali hufanya uwekaji wa mitindo wa RTL kuwa mgumu , kama vile kukatika kwa mistari kwa Kiarabu. Kwa hivyo huduma zinaweza kupunguzwa kutoka kwa pato la RTL kwa kuweka rtlchaguo kwa false:

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

Pato:

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

Hii haitoi chochote katika RTL, shukrani kwa maagizo ya udhibiti wa RTLCSSremove .