Utiliti API

Utilitas API mangrupikeun alat dumasar-Sass pikeun ngahasilkeun kelas utiliti.

Dina kaca ieu

Utiliti Bootstrap dihasilkeun ku API utilitas kami sareng tiasa dianggo pikeun ngarobih atanapi ngalegaan set standar kelas utilitas kami via Sass. API utiliti kami dumasar kana runtuyan peta Sass jeung fungsi pikeun generating kulawarga kelas jeung sagala rupa pilihan. Upami anjeun teu biasa sareng peta Sass, baca dina dokumén Sass resmi pikeun ngamimitian.

Peta éta $utilitiesngandung sadaya utilitas kami sareng engké dihijikeun sareng $utilitiespeta khusus anjeun, upami aya. Peta utiliti ngandung daptar konci grup utiliti anu nampi pilihan ieu:

Pilihan	Tipe	Katerangan
`property`	Dibutuhkeun	Ngaran sipat, ieu bisa mangrupa string atawa Asép Sunandar Sunarya ti string (misalna paddings horizontal atawa margins).
`values`	Dibutuhkeun	Daptar nilai, atanapi peta upami anjeun henteu hoyong nami kelas sami sareng nilaina. Upami `null`dianggo salaku konci peta, éta henteu dikompilasi.
`class`	Pilihan	Variabel pikeun nami kelas upami anjeun henteu hoyong éta sami sareng harta. Bisi anjeun teu nyadiakeun `class`konci na `property`konci mangrupa Asép Sunandar Sunarya ti string, ngaran kelas bakal unsur mimiti `property`Asép Sunandar Sunarya dina.
`state`	Pilihan	Daptar varian pseudo-kelas kawas `:hover`atawa `:focus`ngahasilkeun pikeun utiliti. Taya nilai standar.
`responsive`	Pilihan	Boolean nunjukkeun lamun kelas responsif perlu dihasilkeun. `false`sacara standar.
`rfs`	Pilihan	Boolean pikeun ngaktipkeun rescaling cairan. Tingali kana halaman RFS pikeun terang kumaha ieu jalan. `false`sacara standar.
`print`	Pilihan	Boolean nunjukkeun lamun kelas print kudu dihasilkeun. `false`sacara standar.
`rtl`	Pilihan	Boolean nunjukkeun upami utiliti kedah disimpen dina RTL. `true`sacara standar.

API dipedar

Sadaya variabel utiliti ditambahkeun kana $utilitiesvariabel dina _utilities.scssstylesheet urang. Unggal grup utilitas kasampak kawas kieu:

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

Anu kaluaran di handap ieu:

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

Awalan kelas custom

Anggo classpilihan pikeun ngarobih awalan kelas anu dianggo dina CSS anu disusun:

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

Kaluaran:

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

Amérika Sarikat

Paké statepilihan pikeun ngahasilkeun variasi pseudo-kelas. Conto pseudo-kelas nyaeta :hoverna :focus. Nalika daptar nagara bagian disadiakeun, classnames dijieun pikeun pseudo-kelas éta. Contona, pikeun ngarobah opacity on hover, tambahkeun state: hovertur Anjeun bakal meunang .opacity-hover:hoverdina CSS disusun Anjeun.

Peryogi sababaraha kelas pseudo? Paké daptar spasi-dipisahkeun nagara bagian state: hover focus:.

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

Kaluaran:

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

Utiliti responsif

Tambahkeun responsiveboolean pikeun ngahasilkeun utilitas responsif (contona, .opacity-md-25) dina sadaya titik putus .

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

Kaluaran:

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

Ngarobah Utiliti

Override Utiliti aya ku ngagunakeun konci sarua. Salaku conto, upami anjeun hoyong kelas utiliti overflow responsif tambahan, anjeun tiasa ngalakukeun ieu:

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

Utiliti print

Aktipkeun printpilihan ogé bakal ngahasilkeun kelas utiliti pikeun citak, nu ngan dilarapkeun dina @media print { ... }pamundut média.

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

Kaluaran:

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

pentingna

Kabéh Utiliti dihasilkeun ku API kaasup !importantpikeun mastikeun aranjeunna override komponén tur kelas modifier sakumaha dimaksudkeun. Anjeun tiasa togél setélan ieu sacara global sareng $enable-important-utilitiesvariabel (standar ka true).

Ngagunakeun API

Ayeuna anjeun geus wawuh jeung kumaha Utiliti API jalan, diajar kumaha carana nambahkeun kelas custom anjeun sorangan jeung ngaropéa utilitas standar urang.

Tambahkeun utiliti

Utiliti anyar tiasa nambihan kana $utilitiespeta standar nganggo map-merge. Pastikeun file Sass kami anu diperyogikeun sareng _utilities.scssdiimpor heula, teras paké map-mergepikeun nambihan utilitas tambahan anjeun. Contona, ieu kumaha carana nambahkeun cursorutilitas responsif kalayan tilu nilai.

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

Ngaropéa Utiliti

$utilitiesNgaropéa Utiliti aya dina peta standar kalawan map-getjeung map-mergefungsi. Dina conto di handap, urang nambihan nilai tambahan kana widthutilitas. Mimitian ku awal map-mergeteras sebutkeun utilitas anu anjeun hoyong modifikasi. Ti dinya, cokot "width"peta anu disarangkeun map-getpikeun ngaksés sareng ngarobih pilihan sareng nilai utiliti.

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

Aktipkeun responsif

Anjeun tiasa ngaktifkeun kelas responsif pikeun sakumpulan utilitas anu ayeuna henteu responsif sacara standar. Contona, sangkan borderkelas responsif:

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

Ieu ayeuna bakal ngahasilkeun variasi responsif .bordersareng .border-0pikeun tiap breakpoint. CSS Anjeun dihasilkeun bakal kasampak kawas kieu:

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

Ganti ngaran utiliti

Utiliti v4 leungit, atanapi biasa nganggo konvénsi ngaran anu sanés? Utiliti API tiasa dianggo pikeun nimpa hasil classtina utilitas anu dipasihkeun-contona, pikeun ngaganti ngaran .ms-*utilitas ka 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 ),
    ),
  )
);

Cabut utilitas

Cabut salah sahiji utilitas standar ku netepkeun konci grup ka null. Contona, pikeun miceun kabeh widthUtiliti kami, nyieun hiji $utilities map-mergetur nambahkeun "width": nulldina.

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

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

Cabut utiliti dina RTL

Sababaraha kasus tepi ngajantenkeun gaya RTL sesah , sapertos putus garis dina basa Arab. Janten utilitas tiasa diturunkeun tina kaluaran RTL ku netepkeun rtlpilihan pikeun false:

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

Kaluaran:

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

Ieu henteu ngaluarkeun nanaon dina RTL, hatur nuhun kana diréktif kontrol RTLCSSremove .