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	Thamani chaguomsingi	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, `class`haijatanguliwa na jina la darasa.
`class`	Hiari	null	Jina la darasa lililoundwa. Ikiwa haijatolewa na `property`ni safu ya mifuatano, `class`itakuwa chaguomsingi kwa kipengele cha kwanza cha `property`safu. Ikiwa haijatolewa na `property`ni kamba, `values`funguo hutumiwa kwa `class`majina.
`css-var`	Hiari	`false`	Boolean kuzalisha vigeu vya CSS badala ya sheria za CSS.
`css-variable-name`	Hiari	null	Jina maalum lisilo na kiambishi awali la tofauti ya CSS ndani ya mpangilio wa kanuni.
`local-vars`	Hiari	null	Ramani ya vigeu vya ndani vya CSS vya kuzalisha pamoja na sheria za CSS.
`state`	Hiari	null	Orodha ya vibadala vya aina bandia (km, `:hover`au `:focus`) vya kutengeneza.
`responsive`	Hiari	`false`	Boolean ikionyesha ikiwa madarasa sikivu yanapaswa kuzalishwa.
`rfs`	Hiari	`false`	Boolean kuwezesha uwekaji upya wa maji kwa RFS .
`print`	Hiari	`false`	Boolean ikionyesha kama madarasa ya uchapishaji yanahitaji kuzalishwa.
`rtl`	Hiari	`true`	Boolean ikionyesha ikiwa matumizi yanapaswa kuwekwa katika RTL.

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

Mali

Ufunguo unaohitajika propertylazima uwekwe kwa matumizi yoyote, na lazima uwe na sifa halali ya CSS. Mali hii hutumiwa katika kanuni za matumizi zinazozalishwa. Wakati classufunguo umeachwa, pia hutumika kama jina la darasa chaguo-msingi. Fikiria text-decorationmatumizi:

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

Pato:

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

Maadili

Tumia valuesufunguo kubainisha ni thamani zipi za zilizobainishwa propertyzinafaa kutumika katika majina na kanuni za darasa zinazozalishwa. Inaweza kuwa orodha au ramani (iliyowekwa katika huduma au kwa kutofautisha kwa Sass).

Kama orodha, kama na text-decorationhuduma :

values: none underline line-through

Kama ramani, kama vile opacityhuduma :

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

Kama kigezo cha Sass ambacho huweka orodha au ramani, kama katika positionhuduma zetu :

values: $position-values

Darasa

Tumia classchaguo kubadilisha kiambishi awali cha darasa kinachotumika katika CSS iliyokusanywa. Kwa mfano, kubadilisha kutoka .opacity-*kwa .o-*:

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

Pato:

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

If class: null, hutoa madarasa kwa kila valuesfunguo:

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

Pato:

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

Huduma tofauti za CSS

Weka css-varchaguo la boolean truena API itazalisha vigeuzo vya karibu vya CSS kwa kiteuzi ulichopewa badala ya property: valuesheria za kawaida. Ongeza hiari css-variable-nameili kuweka jina tofauti la mabadiliko ya CSS kuliko jina la darasa.

Zingatia .text-opacity-*huduma zetu. Ikiwa tutaongeza css-variable-namechaguo, tutapata pato maalum.

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

Pato:

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

Vigezo vya CSS vya ndani

Tumia local-varschaguo kubainisha ramani ya Sass ambayo itazalisha vigeuzo vya ndani vya CSS ndani ya kanuni za darasa la matumizi. Tafadhali kumbuka kuwa inaweza kuhitaji kazi ya ziada ili kutumia vigeuzo hivyo vya karibu vya CSS katika sheria za CSS zinazozalishwa. Kwa mfano, fikiria .bg-*huduma zetu:

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

Pato:

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

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

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

Chapisha

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.

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

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

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

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

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

Ondoa huduma

Ondoa huduma zozote chaguo-msingi zilizo na kitendakazi cha map-remove()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";

Unaweza pia kutumia map-merge()kazi ya Sass na kuweka ufunguo wa kikundi nullili kuondoa matumizi.

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

Ongeza, ondoa, rekebisha

Unaweza kuongeza, kuondoa, na kurekebisha huduma nyingi kwa wakati mmoja map-merge()ukitumia kipengele cha Sass . Hivi ndivyo unavyoweza kuchanganya mifano ya awali katika ramani moja kubwa.

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

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 .