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	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	Ibihinduka kubwizina ryishuri niba udashaka ko riba nkumutungo. Mugihe udatanze `class`urufunguzo `property`nurufunguzo ni umurongo wimirongo, izina ryurwego rizaba ikintu cyambere `property`cyibisobanuro.
`state`	Bihitamo	Urutonde rwa pseudo-urwego rutandukanye nka `:hover`cyangwa `:focus`kubyara akamaro. Nta gaciro gasanzwe.
`responsive`	Bihitamo	Boolean yerekana niba amasomo akenewe agomba kubyara. `false`Mburabuzi.
`rfs`	Bihitamo	Boolean kugirango ishoboze gukuraho amazi. Gira icyo ureba kuri page ya RFS kugirango umenye uko ibi bikora. `false`Mburabuzi.
`print`	Bihitamo	Boolean yerekana niba ibyiciro byanditse bigomba kubyara. `false`Mburabuzi.
`rtl`	Bihitamo	Boolean yerekana niba akamaro gakwiye kubikwa muri RTL. `true`Mburabuzi.

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

Icyiciro cyambere

Koresha classuburyo bwo guhindura ibyiciro byambere byakoreshejwe muri CSS yakozwe:

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

Ibisohoka:

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

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

Ibikorwa byingirakamaro

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

Guhindura ibikorwa

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

Shira ibikoresho

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.

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 .