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	Nilai standar	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. Lamun `null`dipaké salaku konci peta, `class`teu prepended kana ngaran kelas.
`class`	Pilihan	null	Ngaran kelas dihasilkeun. Lamun teu disadiakeun sarta `property`mangrupa Asép Sunandar Sunarya ti string, `class`bakal dituna kana unsur mimiti `property`Asép Sunandar Sunarya dina. Mun teu disadiakeun tur `property`mangrupakeun string a, `values`kenop nu dipaké pikeun `class`ngaran.
`css-var`	Pilihan	`false`	Boolean pikeun ngahasilkeun variabel CSS tinimbang aturan CSS.
`css-variable-name`	Pilihan	null	Ngaran custom un-prefixed pikeun variabel CSS jero ruleset nu.
`local-vars`	Pilihan	null	Peta variabel CSS lokal pikeun ngahasilkeun salian aturan CSS.
`state`	Pilihan	null	Daptar varian pseudo-kelas (misalna, `:hover`atawa `:focus`) pikeun ngahasilkeun.
`responsive`	Pilihan	`false`	Boolean nunjukkeun lamun kelas responsif kudu dihasilkeun.
`rfs`	Pilihan	`false`	Boolean pikeun ngaktipkeun rescaling cairan sareng RFS .
`print`	Pilihan	`false`	Boolean nunjukkeun lamun kelas print kudu dihasilkeun.
`rtl`	Pilihan	`true`	Boolean nunjukkeun upami utiliti kedah disimpen dina RTL.

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

Harta

Konci anu diperyogikeun propertykedah disetél pikeun utilitas naon waé, sareng éta kedah ngandung sipat CSS anu sah. Sipat ieu dianggo dina set aturan utiliti anu dihasilkeun. Nalika classkonci disingkahkeun, éta ogé janten nami kelas standar. Mertimbangkeun text-decorationutiliti:

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

Kaluaran:

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

Nilai-nilai

Paké valueskonci pikeun nangtukeun mana nilai pikeun dieusian propertykudu dipaké dina ngaran kelas dihasilkeun sarta aturan. Bisa mangrupa daptar atawa peta (disetél dina Utiliti atawa dina variabel Sass).

Salaku daptar, sapertos text-decorationutilitas :

values: none underline line-through

Salaku peta, sapertos opacityutilitas :

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

Salaku variabel Sass anu nyetél daptar atanapi peta, sapertos dina positionutilitas kami :

values: $position-values

Kelas

Anggo classpilihan pikeun ngarobih awalan kelas anu dianggo dina CSS anu disusun. Contona, pikeun ngarobah tina .opacity-*ka .o-*:

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

Kaluaran:

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

Upami class: null, ngahasilkeun kelas pikeun tiap valueskonci:

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

Kaluaran:

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

Utiliti variabel CSS

Setel css-varpilihan boolean truesareng API bakal ngahasilkeun variabel CSS lokal pikeun pamilih anu dipasihkeun tibatan property: valueaturan anu biasa. Tambahkeun pilihan css-variable-namepikeun nyetél ngaran variabel CSS béda ti ngaran kelas.

Pertimbangkeun .text-opacity-*utiliti urang. Upami urang nambihan css-variable-namepilihan, urang bakal nampi kaluaran khusus.

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

Kaluaran:

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

variabel CSS lokal

Anggo local-varspilihan pikeun nangtukeun peta Sass anu bakal ngahasilkeun variabel CSS lokal dina set aturan kelas utiliti. Perhatikeun yén éta bisa merlukeun gawé tambahan pikeun meakeun eta variabel CSS lokal dina aturan CSS dihasilkeun. Salaku conto, pertimbangkeun .bg-*utilitas kami:

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

Kaluaran:

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

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

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

Nyitak

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.

Utiliti override

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

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

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

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

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

Cabut utilitas

Hapus salah sahiji utilitas standar nganggo map-remove()fungsi 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";

Anjeun oge bisa make map-merge()pungsi Sass tur nyetel konci grup nullpikeun miceun utiliti.

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

Tambahkeun, piceun, ngaropéa

Anjeun tiasa nambihan, mupus, sareng ngarobih seueur utilitas sakaligus nganggo map-merge()fungsi Sass . Kieu kumaha anjeun tiasa ngagabungkeun conto sateuacana kana hiji peta anu langkung ageung.

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

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 .