Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

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 nullsiv raws li daim ntawv qhia qhov tseem ceeb, nws tsis muab tso ua ke.
class xaiv tau null Lub npe ntawm chav kawm generated. Yog tsis muab thiab propertyyog ib qho array ntawm cov hlua, classyuav default rau thawj lub caij ntawm propertyarray.
css-var xaiv tau false Boolean los tsim CSS hloov pauv hloov CSS cov cai.
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, :hoverlos 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 cov chav kawm ntawv yuav tsum tau tsim.
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 tshem tawm, nws kuj tseem 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; }

CSS variable utilities

Teem lub css-varboolean kev xaiv rau truethiab API yuav tsim cov CSS variables hauv zos rau cov neeg xaiv muab es tsis txhob ntawm cov property: valuecai ib txwm muaj. Xav txog peb cov .text-opacity-*khoom siv hluav taws xob:

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

Cov zis:

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 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 cov chav kawm hloov kho 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

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

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

Hloov cov khoom siv hluav taws xob

Hloov 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 nested 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/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

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

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

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 muaj v4 cov khoom siv hluav taws xob, lossis siv rau lwm lub rooj sib tham npe? Cov khoom siv hluav taws xob API tuaj yeem siv los hla dhau qhov tshwm sim classntawm cov khoom siv hluav taws xob - piv txwv li, hloov npe .ms-*cov khoom siv rau cov laus .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 ),
    ),
  )
);

Tshem tawm cov khoom siv hluav taws xob

Tshem tawm ib qho ntawm cov khoom siv siv hluav taws xob los ntawm kev teeb tsa pawg yuam sij rau null. Piv txwv li, kom tshem tawm tag nrho peb cov widthkhoom siv hluav taws xob, tsim ib qho $utilities map-mergethiab ntxiv "width": nullrau hauv.

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

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

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 .