Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Yutiliti API fɔ di wan dɛn we de wok

Di yutiliti API na wan Sass-based tul fɔ jenarayz yutiliti klas dɛn.

Na dis pej

Bootstrap yutiliti dɛn de jenarayz wit wi yutiliti API ɛn dɛn kin yuz am fɔ chenj ɔ ɛkstɛnd wi difɔlt sɛt fɔ yutiliti klas dɛn via Sass. Wi yutiliti API na bays pan wan siriɔs Sass map ɛn fɛnshɔn fɔ jenarayz famili dɛn fɔ klas wit difrɛn opshɔn dɛn. If yu no sabi Sass maps, rid op pan di ofishal Sass docs fo stat.

Di $utilitiesmap gɛt ɔl wi yutiliti dɛn ɛn leta dɛn kin jɔyn am wit yu kɔstɔm $utilitiesmap, if i de. Di yutiliti map gɛt wan list we gɛt ki fɔ yutiliti grup dɛn we de aksept dɛn opshɔn ya:

Ɔda tin Kayn Tɔk bɔt
property Fɔ du Nem fɔ di prɔpati, dis kin bi string ɔ wan arenjmɛnt fɔ string dɛn (ɛgz., ɔrizɔntal pad ɔ margin).
values Fɔ du Lista fɔ valyu dɛn, ɔ map if yu nɔ want di klas nem fɔ bi di sem wit di valyu. If nulldɛn yuz am as map ki, dɛn nɔ de kɔmpilayt am.
class Pɔsibul Variable fɔ di klas nem if yu nɔ want am fɔ bi di sem wit di prɔpati. If yu nɔ gi di classki ɛn propertydi ki na wan arenjmɛnt fɔ string dɛn, di klas nem go bi di fɔs ɛlimɛnt fɔ di propertyarenjmɛnt.
state Pɔsibul Lista fɔ pseudo-klas vayriɔnt dɛn lɛk :hoverɔ :focusfɔ jenarayz fɔ di yutiliti. No difɔlt valyu nɔ de.
responsive Pɔsibul Bulin we de sho if rispɔnsiv klas dɛn nid fɔ jenarayz. falsebay difɔlt.
rfs Pɔsibul Bulin fɔ mek dɛn ebul fɔ riskel di wata. Luk na di RFS pej fɔ no aw dis de wok. falsebay difɔlt.
print Pɔsibul Bulin we de sho if dɛn nid fɔ mek print klas dɛn. falsebay difɔlt.
rtl Pɔsibul Bulin we de sho if yutiliti fɔ de na RTL. truebay difɔlt.

API bin ɛksplen

Ɔl di yutiliti vɛriɔbul dɛn ad to di $utilitiesvɛriɔbul insay wi _utilities.scssstaylshit. Ɛni grup fɔ yutiliti dɛn luk sɔntin lɛk dis:

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

We de autput dɛn tin ya:

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

Kastom klas prɛfiks

Yuz di classopshɔn fɔ chenj di klas prɛfiks we dɛn yuz na di CSS we dɛn dɔn kɔmpilayt:

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

Di tin we de kɔmɔt: .

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

Stet dɛn

Yuz di stateopshɔn fɔ jenarayz pseudo-klas difrɛns dɛn. Ɛgzampul pseudo-klas dɛn na :hoverɛn :focus. We dɛn gi wan list fɔ stet dɛn, dɛn kin mek klas nem fɔ da lay lay klas de. Fɔ ɛgzampul, fɔ chenj opasiti pan hova, ad state: hoverɛn yu go gɛt .opacity-hover:hoverinsay yu kɔmpilayt CSS.

Nid bɔku pseudo-klas dɛn? Yuz wan list we gɛt spɛshal say dɛn fɔ di stet dɛn: state: hover focus.

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

Di tin we de kɔmɔt: .

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

Yutiliti dɛn we de ansa

Ad di responsiveboolean fɔ jenarayz rispɔnsiv yutiliti dɛn (ɛgz., .opacity-md-25) akɔs ɔl di brekpɔynt dɛn .

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

Di tin we de kɔmɔt: .

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

We dɛn de chenj di yutiliti dɛn

Ɔvalayz di yutiliti dɛn we dɔn de bay we yu yuz di sem ki. Fɔ ɛgzampul, if yu want ɔda rispɔnsiv ɔvaflɔ yutiliti klas dɛn, yu kin du dis:

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

If yu ɛnabul di printopshɔn, i go mek yu gɛt yutiliti klas dɛn bak fɔ print, we dɛn jɔs de yuz insay di @media print { ... }midia kwɛstyɔn.

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

Di tin we de kɔmɔt: .

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

Impɔtant tin

Ɔl di yutiliti dɛn we di API dɔn mek inklud !importantfɔ mek shɔ se dɛn ɔvalayz kɔmpɔnɛnt ɛn modifya klas dɛn lɛk aw dɛn bin want fɔ du am. Yu kin chenj dis sɛtin global wan wit di $enable-important-utilitiesvɛriɔbul (difɔlt to true).

We yu de yuz di API

Naw we yu dɔn sabi aw di yutiliti dɛn API de wok, lan aw fɔ ad yu yon kɔstɔm klas dɛn ɛn chenj wi difɔlt yutiliti dɛn.

Ad yutiliti dɛn

Yu kin ad nyu yutiliti dɛn to di difɔlt $utilitiesmap wit wan map-merge. Mek shɔ se wi Sass fayl dɛn we wi nid ɛn _utilities.scssdɛn import dɛn fɔs, dɔn yuz di map-mergefɔ ad yu ɔda yutiliti dɛn. Fɔ ɛgzampul, na dis na aw fɔ ad wan rispɔnsiv cursoryutiliti wit tri valyu dɛn.

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

Modify di yutiliti dɛn

Modify di yutiliti dɛn we dɔn de na di difɔlt $utilitiesmap wit map-getɛn map-mergefɛnshɔn dɛn. Insay di ɛgzampul we de dɔŋ ya, wi de ad wan ɔda valyu to di widthyutiliti dɛn. Start wit wan initial map-mergeɛn afta dat sho us yutiliti yu want fɔ chenj. Frɔm de, tek di "width"map we dɛn dɔn nɛst wit map-getfɔ akses ɛn chenj di yutiliti in opshɔn ɛn valyu dɛn.

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

Enable fɔ ansa

Yu kin ɛnabul rispɔnsiv klas dɛn fɔ wan sɛt fɔ yutiliti dɛn we dɔn de we nɔ de ansa naw bay difɔlt. Fɔ ɛgzampul, fɔ mek di borderklas dɛn ansa:

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

Dis go naw jεnarεt rεspכns vεryushכn dεm fכ .borderεn .border-0fכ εvri brekpכynt. Yu CSS we yu dɔn mek go tan lɛk dis:

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

Rinem di yutiliti dɛn

Misin v4 yutiliti, ɔ yus to ɔda nem kɔnvɛnshɔn? Di yutiliti dɛn API kin yuz fɔ ɔvalayz di rizɔlt classfɔ wan yutiliti we dɛn gi—fɔ ɛgzampul, fɔ chenj di nem fɔ .ms-*yutiliti dɛn to 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 ),
    ),
  )
);

Rimov di yutiliti dɛn

Rimov ɛni wan pan di difɔlt yutiliti dɛn bay we yu sɛt di grup ki to null. Fɔ ɛgzampul, fɔ pul ɔl wi widthyutiliti dɛn, mek wan $utilities map-mergeɛn ad "width": nullinsay.

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

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

Rimov yutiliti na RTL

Sɔm ed kes dɛn kin mek RTL stayl at , lɛk layn brek insay Arabik. So yutiliti dɛn kin drɔp frɔm RTL ɔtput bay we dɛn sɛt di rtlopshɔn to false:

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

Di tin we de kɔmɔt: .

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

Dis nɔ de autput ɛnitin na RTL, tank to di RTLCSS removekɔntrol dairekt .