Utility API

Tus nqi hluav taws xob API yog Sass-based cov cuab yeej los tsim cov chav kawm siv hluav taws xob.

Ntawm nplooj ntawv no

Bootstrap utilities yog tsim los nrog peb cov nqi hluav taws xob API thiab tuaj yeem siv los hloov kho lossis txuas ntxiv peb cov chav kawm siv hluav taws xob ntawm Sass. Peb qhov kev siv hluav taws xob API yog raws li Sass maps thiab cov haujlwm ua haujlwm rau tsim cov tsev neeg ntawm cov chav kawm nrog ntau yam kev xaiv. Yog tias koj tsis paub nrog Sass maps, nyeem rau ntawm Sass docs los pib.

Daim $utilitiesntawv qhia muaj tag nrho peb cov khoom siv hluav taws xob thiab tom qab sib koom ua ke nrog koj $utilitiesdaim ntawv qhia kev cai, yog tias muaj. Daim ntawv qhia kev siv hluav taws xob muaj cov npe tseem ceeb ntawm cov pab pawg siv hluav taws xob uas lees txais cov kev xaiv hauv qab no:

Kev xaiv	Hom	Default tus nqi	Kev piav qhia
`property`	Yuav tsum tau	-	Lub npe ntawm cov cuab yeej, qhov no tuaj yeem yog cov hlua lossis cov hlua ntawm cov hlua (xws li, kab rov tav paddings lossis margins).
`values`	Yuav tsum tau	-	Daim ntawv teev cov nqi, lossis daim ntawv qhia yog tias koj tsis xav kom lub npe chav kawm zoo ib yam li tus nqi. Yog `null`siv raws li daim ntawv qhia qhov tseem ceeb, `class`tsis yog prepended rau lub npe chav kawm.
`class`	xaiv tau	null	Lub npe ntawm chav kawm generated. Yog tsis muab thiab `property`yog ib qho array ntawm cov hlua, `class`yuav default rau thawj lub caij ntawm `property`array. Yog tsis muab thiab `property`yog ib txoj hlua, cov `values`yawm sij yog siv rau cov `class`npe.
`css-var`	xaiv tau	`false`	Boolean los tsim CSS hloov pauv hloov CSS cov cai.
`css-variable-name`	xaiv tau	null	Custom un-prefixed name for CSS variable in the ruleset.
`local-vars`	xaiv tau	null	Daim duab qhia chaw ntawm CSS variables hauv zos los tsim ntxiv rau CSS cov cai.
`state`	xaiv tau	null	Daim ntawv teev cov pseudo-class variants (xws li, `:hover`los yog `:focus`) los tsim.
`responsive`	xaiv tau	`false`	Boolean qhia tias cov chav kawm teb yuav tsum raug tsim.
`rfs`	xaiv tau	`false`	Boolean los pab kom cov dej rescaling nrog RFS .
`print`	xaiv tau	`false`	Boolean qhia yog tias yuav tsum tau tsim cov chav luam ntawv.
`rtl`	xaiv tau	`true`	Boolean qhia tias kev siv hluav taws xob yuav tsum khaws cia hauv RTL.

API piav qhia

Tag nrho cov khoom siv hluav taws xob tau ntxiv rau qhov $utilitiessib txawv hauv peb daim _utilities.scssntawv teev npe. Txhua pawg ntawm cov khoom siv hluav taws xob zoo li no:

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

Uas outputs cov nram qab no:

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

Khoom

Tus yuam propertysij xav tau yuav tsum tau teeb tsa rau txhua qhov kev siv hluav taws xob, thiab nws yuav tsum muaj CSS cov cuab yeej siv tau. Cov cuab yeej no yog siv rau hauv cov khoom siv hluav taws xob tsim tawm txoj cai. Thaum tus classyuam sij raug rho tawm, nws kuj ua haujlwm raws li lub npe hauv chav kawm. Xav txog kev text-decorationsiv hluav taws xob:

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

Cov zis:

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

Tus nqi

Siv tus valuesyuam sij txhawm rau txheeb xyuas qhov muaj nuj nqis rau qhov twg propertyyuav tsum tau siv rau hauv cov npe thiab cov cai uas tsim los hauv chav kawm. Yuav ua tau ib daim ntawv teev npe lossis daim ntawv qhia (teem hauv cov khoom siv hluav taws xob lossis hauv Sass sib txawv).

Raws li daim ntawv teev npe, zoo li nrog text-decorationcov khoom siv hluav taws xob :

values: none underline line-through

Raws li daim ntawv qhia, zoo li nrog opacitycov khoom siv hluav taws xob :

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

Raws li Sass hloov pauv uas teev cov npe lossis daim ntawv qhia, xws li hauv peb cov positionkhoom siv hluav taws xob :

values: $position-values

Chav kawm

Siv cov classkev xaiv los hloov cov chav kawm prefix siv nyob rau hauv lub compiled CSS. Piv txwv li, hloov los ntawm .opacity-*mus rau .o-*:

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

Cov zis:

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

Yog tias class: null, tsim cov chav kawm rau txhua tus valuesyuam sij:

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

Cov zis:

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

CSS variable utilities

Teem qhov css-varkev xaiv boolean rau truethiab API yuav tsim cov CSS hauv zos hloov pauv rau tus neeg xaiv xaiv tsis yog cov property: valuecai li niaj zaus. Ntxiv ib qho kev xaiv css-variable-namelos teeb tsa lub npe sib txawv CSS sib txawv dua li lub npe hauv chav kawm.

Xav txog peb cov .text-opacity-*khoom siv hluav taws xob. Yog tias peb ntxiv qhov css-variable-namekev xaiv, peb yuav tau txais kev cai tsim tawm.

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

Cov zis:

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

Local CSS variables

Siv qhov local-varskev xaiv los qhia txog Sass daim ntawv qhia uas yuav tsim cov CSS hauv zos sib txawv hauv cov chav kawm siv hluav taws xob cov cai. Thov nco ntsoov tias nws yuav xav tau kev ua haujlwm ntxiv txhawm rau haus cov CSS hauv zos hloov pauv hauv cov cai CSS tsim. Piv txwv li, xav txog peb cov .bg-*khoom siv hluav taws xob:

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

Cov zis:

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

Xeev

Siv qhov statekev xaiv los tsim pseudo-chav kawm variations. Piv txwv pseudo-chav kawm yog :hoverthiab :focus. Thaum ib daim ntawv teev npe ntawm lub xeev tau muab, cov npe chav kawm raug tsim rau cov chav kawm pseudo. Piv txwv li, hloov opacity ntawm hover, ntxiv state: hoverthiab koj yuav tau txais .opacity-hover:hovernyob rau hauv koj compiled CSS.

Xav tau ntau pseudo-chav kawm? Siv cov npe sib cais ntawm lub xeev: state: hover focus.

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

Cov zis:

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

Teb

Ntxiv cov responsiveboolean los tsim cov khoom siv hluav taws xob (xws li, .opacity-md-25) thoob plaws txhua qhov kev tawg .

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

Cov zis:

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

Luam tawm

Ua kom txoj printkev xaiv tseem yuav tsim cov chav kawm siv hluav taws xob rau kev luam tawm, uas tsuas yog siv hauv cov @media print { ... }lus nug xov xwm.

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

Cov zis:

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

Qhov tseem ceeb

Tag nrho cov khoom siv hluav taws xob tsim los ntawm API suav nrog !importantkom ntseeg tau tias lawv hla cov khoom siv thiab hloov cov chav kawm raws li xav tau. Koj tuaj yeem toggle qhov teeb tsa thoob ntiaj teb nrog qhov $enable-important-utilitiessib txawv (defaults rau true).

Siv API

Tam sim no koj paub txog yuav ua li cas cov khoom siv hluav taws xob API ua haujlwm, kawm ntxiv koj tus kheej cov chav kawm kev cai thiab hloov kho peb cov khoom siv hluav taws xob.

Tshaj tawm cov khoom siv hluav taws xob

Tshem tawm cov khoom siv uas twb muaj lawm los ntawm kev siv tib tus yuam sij. Piv txwv li, yog tias koj xav tau cov chav kawm siv dej ntau dhau, koj tuaj yeem ua qhov no:

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

Ntxiv cov khoom siv hluav taws xob

Cov khoom siv hluav taws xob tshiab tuaj yeem muab ntxiv rau hauv $utilitiesdaim ntawv qhia ua ntej nrog a map-merge. Xyuas kom tseeb tias peb cov ntaub ntawv Sass xav tau thiab _utilities.scssraug xa tawm ua ntej, tom qab ntawd siv map-mergelos ntxiv koj cov khoom siv ntxiv. Piv txwv li, ntawm no yog yuav ua li cas ntxiv cov khoom siv teb cursornrog peb qhov tseem ceeb.

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

Hloov cov khoom siv hluav taws xob

Hloov kho cov khoom siv hluav taws xob uas twb muaj lawm hauv $utilitiesdaim ntawv qhia ua ntej nrog map-getthiab map-mergeua haujlwm. Hauv qhov piv txwv hauv qab no, peb tab tom ntxiv tus nqi ntxiv rau cov widthkhoom siv hluav taws xob. Pib nrog qhov pib map-mergethiab tom qab ntawd qhia meej tias qhov khoom siv twg koj xav hloov kho. Los ntawm qhov ntawd, nqa "width"daim ntawv qhia zes nrog map-getrau kev nkag mus thiab hloov kho cov khoom siv hluav taws xob cov kev xaiv thiab cov txiaj ntsig.

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

Qhib cov lus teb

Koj tuaj yeem qhib cov chav kawm teb rau cov khoom siv hluav taws xob uas twb muaj lawm uas tam sim no tsis teb los ntawm lub neej ntawd. Piv txwv li, ua kom cov borderchav kawm teb:

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

Qhov no tam sim no yuav tsim cov kev hloov pauv ntawm .borderthiab .border-0rau txhua qhov kev tawg. Koj qhov CSS tsim los yuav zoo li no:

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

Hloov npe cov khoom siv hluav taws xob

Tsis nco v4 kev siv hluav taws xob, lossis siv rau lwm lub rooj sib tham npe? Cov khoom siv hluav taws xob API tuaj yeem siv los cuam tshuam qhov tshwm sim classntawm cov khoom siv hluav taws xob tau muab - piv txwv li, hloov npe .ms-*cov khoom siv rau cov laus .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";

Tshem tawm cov khoom siv hluav taws xob

Tshem tawm ib qho ntawm cov khoom siv hluav taws xob siv nrog map-remove()Sass muaj nuj nqi .

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

Koj tuaj yeem siv map-merge()Sass muaj nuj nqi thiab teeb tsa pab pawg yuam sij nullkom tshem tawm cov nqi hluav taws xob.

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

Ntxiv, tshem tawm, hloov kho

Koj tuaj yeem ntxiv, tshem tawm, thiab hloov kho ntau yam khoom siv txhua lub sijhawm nrog map-merge()Sass muaj nuj nqi . Nov yog qhov koj tuaj yeem muab cov piv txwv yav dhau los rau hauv ib daim ntawv qhia loj dua.

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

Tshem tawm cov khoom siv hauv RTL

Qee qhov xwm txheej ua rau RTL styling nyuaj , xws li kab tawg hauv Arabic. Yog li kev siv hluav taws xob tuaj yeem raug tshem tawm ntawm RTL cov zis los ntawm kev teeb tsa kev rtlxaiv rau false:

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

Cov zis:

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

Qhov no tsis tso tawm ib yam dab tsi hauv RTL, ua tsaug rau RTLCSS removecov lus qhia .