Akamaro API

Akamaro API nigikoresho gishingiye kuri Sass yo kubyara amasomo yingirakamaro.

Kuriyi page

Ibikoresho bya Bootstrap byakozwe hamwe na API yacu yingirakamaro kandi irashobora gukoreshwa muguhindura cyangwa kwagura ibyiciro byibanze byamasomo yingirakamaro binyuze muri Sass. Ibikorwa byacu API bishingiye kumurongo wamakarita ya Sass nibikorwa byo kubyara imiryango yamasomo hamwe namahitamo atandukanye. Niba utamenyereye ikarita ya Sass, soma kuri dosiye ya Sass yemewe kugirango utangire.

Ikarita $utilitiesikubiyemo ibikorwa byacu byose hanyuma ikaza guhuzwa n'ikarita yawe yihariye $utilities, niba ihari. Ikarita yingirakamaro ikubiyemo urutonde rwibanze rwamatsinda yingirakamaro yemera amahitamo akurikira:

Ihitamo	Andika	Agaciro gasanzwe	Ibisobanuro
`property`	Birasabwa	-	Izina ryumutungo, ibi birashobora kuba umurongo cyangwa umurongo wimigozi (urugero, padi itambitse cyangwa marge).
`values`	Birasabwa	-	Urutonde rwindangagaciro, cyangwa ikarita niba udashaka ko izina ryurwego riba kimwe nagaciro. Niba `null`ikoreshwa nk'urufunguzo rw'ikarita, ntabwo yakozwe.
`class`	Bihitamo	null	Izina ryurwego rwabyaye. Niba bidatanzwe kandi `property`ni umurongo wimirongo, `class`uzahitamo kubintu byambere bya `property`array.
`css-var`	Bihitamo	`false`	Boolean kubyara CSS impinduka aho kuba amategeko ya CSS.
`local-vars`	Bihitamo	null	Ikarita yibihinduka bya CSS byaho kubyara byiyongera kumategeko ya CSS.
`state`	Bihitamo	null	Urutonde rwibihimbano-byiciro (urugero, `:hover`cyangwa `:focus`) kubyara.
`responsive`	Bihitamo	`false`	Boolean yerekana niba ibyiciro byitabira bigomba kubyara.
`rfs`	Bihitamo	`false`	Boolean kugirango ishoboze gutemba hamwe na RFS .
`print`	Bihitamo	`false`	Boolean yerekana niba ibyiciro byanditse bigomba kubyara.
`rtl`	Bihitamo	`true`	Boolean yerekana niba akamaro gakwiye kubikwa muri RTL.

API yasobanuye

Ibihinduka byose byingirakamaro byongewe kubihinduka muburyo $utilitiesbwacu _utilities.scss. Buri tsinda ryibikorwa bisa nkibi:

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

Nibisohoka muri ibi bikurikira:

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

Umutungo

Urufunguzo rusabwa propertyrugomba gushyirwaho kubikorwa byose, kandi rugomba kuba rufite umutungo wa CSS wemewe. Uyu mutungo ukoreshwa mumategeko yatanzwe yingirakamaro. Iyo classurufunguzo rwasibwe, nabwo rukora nkizina risanzwe ryizina. Reba text-decorationakamaro:

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

Ibisohoka:

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

Indangagaciro

Koresha valuesurufunguzo kugirango ugaragaze indangagaciro zagenwe propertyzigomba gukoreshwa mumazina yatanzwe namategeko. Birashobora kuba urutonde cyangwa ikarita (shyira mubikorwa cyangwa muri Sass ihinduka).

Nkurutonde, nka hamwe text-decorationnibikorwa :

values: none underline line-through

Nka ikarita, kimwe opacitynibikorwa byingirakamaro :

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

Nimpinduka ya Sass ishyiraho urutonde cyangwa ikarita, nkuko biri mubikorwa positionbyacu :

values: $position-values

Icyiciro

Koresha classuburyo bwo guhindura urwego rwibanze rukoreshwa muri CSS yakozwe. Kurugero, Guhindura Kuva .opacity-*Kuri .o-*:

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

Ibisohoka:

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

Ibikorwa bya CSS bihinduka

Shiraho uburyo bwa css-varboolean truehanyuma API izabyara CSS ihinduka kubatoranijwe aho kuba property: valueamategeko asanzwe. Reba ibyo dukoresha .text-opacity-*:

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

Ibisohoka:

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

Ibihinduka bya CSS byaho

Koresha local-varsuburyo bwo kwerekana ikarita ya Sass izatanga impinduka za CSS zaho murwego rwingirakamaro. Nyamuneka menya ko bishobora gusaba akazi kiyongereye kugirango ukoreshe ibyo bihindagurika bya CSS mumategeko yatanzwe na CSS. Kurugero, tekereza .bg-*kubikorwa byacu:

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

Ibisohoka:

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

Ibihugu

Koresha stateuburyo bwo kubyara pseudo-urwego rutandukanye. Urugero pseudo-ibyiciro ni :hoverna :focus. Iyo urutonde rwibihugu rutanzwe, amazina y'ibyiciro aremwa kuri iyo pseudo-urwego. Kurugero, kugirango uhindure opacite kuri hover, ongeraho state: hoverhanyuma uzinjire .opacity-hover:hovermuri CSS yawe yakusanyije.

Ukeneye amasomo menshi ya pseudo? Koresha umwanya watandukanijwe na leta : state: hover focus.

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

Ibisohoka:

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

Igisubizo

Ongeraho responsiveboolean kugirango ubyare ibikorwa byingirakamaro (urugero, .opacity-md-25) mubice byose .

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

Ibisohoka:

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

Icapa

Gushoboza printamahitamo bizana ibyiciro byingirakamaro byo gucapa, bikoreshwa gusa @media print { ... }mubibazo byitangazamakuru.

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

Ibisohoka:

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

Akamaro

Ibikorwa byose byakozwe na API birimo !importantkwemeza ko barenga ibice hamwe nibyiciro byo guhindura nkuko byateganijwe. Urashobora guhinduranya igenamiterere kwisi yose hamwe $enable-important-utilitiesnimpinduka (isanzwe kuri true).

Gukoresha API

Noneho ko umenyereye uburyo ibikorwa API ikora, wige uburyo wakongeramo ibyiciro byawe bwite kandi uhindure ibikorwa byacu bidasanzwe.

Kurenga ibikorwa byingenzi

Kurenga ibikorwa bihari ukoresheje urufunguzo rumwe. Kurugero, niba ushaka inyongera yinyongera yibikorwa byingirakamaro, urashobora gukora ibi:

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

Ongeraho ibikorwa byingirakamaro

Ibikorwa bishya birashobora kongerwaho $utilitiesikarita isanzwe hamwe na map-merge. Menya neza ko dosiye zacu za Sass zisabwa kandi _utilities.scsszitumizwa mu mahanga mbere, hanyuma ukoreshe i map-mergekugirango wongere ibikorwa byinyongera. Kurugero, dore uburyo bwo kongeramo ibikorwa cursorbyingirakamaro hamwe nindangagaciro eshatu.

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

Hindura ibikorwa byingirakamaro

Hindura ibikorwa bihari mukarita isanzwe $utilitieshamwe map-getnibikorwa map-merge. Murugero rukurikira, twongeyeho agaciro kinyongera mubikorwa byingirakamaro width. Tangira nintangiriro map-mergehanyuma ugaragaze akamaro ushaka guhindura. Kuva aho, uzane "width"ikarita yatondekanye hamwe map-getkugirango ugere kandi uhindure ibikorwa byingirakamaro hamwe nagaciro.

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

Emera gusubiza

Urashobora gushoboza ibyiciro byitondewe kumurongo uriho wibyingenzi bititabira kurubu. Kurugero, kugirango borderamasomo yitabe:

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

Ubu noneho bizatanga ibisubizo byitondewe bya .borderna .border-0kuri buri cyiciro. CSS yawe yabyaye izasa nkiyi:

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

Hindura izina

Kubura v4 ibikorwa, cyangwa byakoreshejwe mubindi bikorwa byo kwita izina? Ibikorwa API irashobora gukoreshwa muguhisha ibisubizo bivuye mubikorwa classbyingirakamaro-kurugero, guhindura izina .ms-*ibikorwa byashaje .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 ),
    ),
  )
);

Kuraho ibikorwa

Kuraho ikintu icyo aricyo cyose cyingirakamaro mugushiraho urufunguzo rwitsinda null. Kurugero, gukuraho widthibikorwa byacu byose, kora a $utilities map-mergehanyuma wongere "width": nullimbere.

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

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

Kuraho akamaro muri RTL

Imanza zimwe zituma stil ya RTL igorana , nko gucamo umurongo mucyarabu. Gutyo ibikorwa byingirakamaro birashobora kuva mubisohoka RTL mugushiraho rtlamahitamo kuri false:

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

Ibisohoka:

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

Ibi ntacyo bisohora muri RTL, tubikesha amabwiriza yo kugenzura RTLCSSremove .