Utility API hmanga hman theih a ni

Utility API hi Sass hmanga utility class siamna hmanrua a ni.

He page ah hian

Bootstrap utilities hi kan utility API hmanga siam a ni a, Sass kaltlangin kan default set of utility class te siam danglam emaw tihzauh emaw nan kan hmang thei bawk. Kan utility API hi Sass map leh function hrang hrang hmanga class chhungkaw siamna tur option hrang hrang neia siam a ni. Sass maps i hriat loh chuan official Sass docs -ah chhiar la, i tan ang.

Map ah hian $utilitieskan utility zawng zawng a awm a, a hnuah i custom $utilitiesmap nen a inzawm khawm a, a awm chuan. Utility map ah hian a hnuaia option te hi pawmtu utility group keyed list a awm a:

Duhthlanna	Lampang	Hrilhfiahna
`property`	Mamawh	Property hming, hei hi string emaw string array (eg, horizontal paddings emaw margins) emaw pawh a ni thei.
`values`	Mamawh	Value list, a nih loh leh class hming chu value nen a inang duh loh chuan map. `null`Map key atana hman a nih chuan compile a ni lo.
`class`	Duh zawk thlang	Property nen a inang duh loh chuan class hming atan variable. Key i pek loh chuan `class`key `property`chu string array a nih chuan class hming chu array element hmasa ber a ni ang `property`.
`state`	Duh zawk thlang	Utility atana pseudo-class variant duh `:hover`emaw siam tur emaw list. `:focus`Default value a awm lo.
`responsive`	Duh zawk thlang	Boolean hian responsive class siam a ngai em tih a tarlang. `false`a default a ni.
`rfs`	Duh zawk thlang	Boolean hmangin fluid rescaling tih theih a ni. Hei hi engtin nge a thawh tih hriat duh chuan RFS page hi en la . `false`a default a ni.
`print`	Duh zawk thlang	Boolean hian print class siam a ngai em tih a tarlang. `false`a default a ni.
`rtl`	Duh zawk thlang	Boolean hian utility chu RTL-ah dah tur a nih leh nih loh a tarlang. `true`a default a ni.

API chuan a hrilhfiah a

Utility variable zawng zawng hi kan stylesheet $utilitieschhunga variable ah hian kan dah vek a. _utilities.scssUtility group tin hi hetiang hian an lang a:

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

Chu chuan a hnuaia mi te hi a output a ni:

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

Custom class hmasa ber a ni

classCompiled CSS-a class prefix hman thin chu thlak turin option hmang ang che :

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

Output: 1.1.

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

State hrang hrangte

statePseudo-class variation siam nan option hmang rawh . Entirnan pseudo-classes te chu :hoverleh :focus. State list pek a nih chuan chu pseudo-class tan chuan classname siam a ni. Entirnan, hover-a opacity thlak tur chuan add la, i compiled CSS kha i state: hoverlut ang ..opacity-hover:hover

Pseudo-classes tam tak mamawh em? State hrang hrangte chu space-a then hran theih list hmang rawh: state: hover focus.

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

Output: 1.1.

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

Utilities chhanna pe thei

Breakpoint zawng zawngah responsive utilities (eg, ) responsivesiam turin boolean chu add rawh ..opacity-md-25

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

Output: 1.1.

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

Utilities thlak danglam

Key inang hmangin utility awmsa te chu override rawh. Entirnan, responsive overflow utility class dang i duh chuan hetiang hian i ti thei ang:

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

Print utilities te pawh a awm

printOption enable hian print atan utility class a siam bawk@media print { ... } ang a, chu chu media query chhungah chauh hman a ni.

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

Output: 1.1.

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

Pawimawhna

API atanga utility siam zawng zawng !importanthian component leh modifier class te chu a tum angin an override theih nan a huam vek a ni. $enable-important-utilitiesHe setting hi global-in variable (defaults to ) hmangin i toggle thei truebawk.

API hmangin

Tunah chuan utilities API hnathawh dan i hre tawh a, nangmah ngeiin custom class add dan tur leh kan default utilities te siam danglam dan tur zir rawh.

Utilities te pawh a awm bawk

$utilitiesDefault map ah hian utility thar dah theih a ni a map-merge. Kan mamawh Sass files te _utilities.scsschu import hmasa phawt la, chutah chuan map-mergei additional utilities te add turin the hmang rawh. Entirnan, hetah hian cursorvalue pathum nei responsive utility add dan tur kan rawn tarlang e.

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

Utilities te siam danglam thin

Default $utilitiesmap -a utility awmsa te chu map-getleh map-mergefunction te nen siam danglam rawh. A hnuaia entirnan hian widthutilities-ah hian value dang kan dah belh a ni. Initial hmangin tan la, map-mergeeng utility nge i siam danglam duh tih ziak rawh. Chuta tang chuan nested "width"map chu fetch la, map-getutility-a option leh value te chu access leh modify rawh.

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

Responsive tih theih a ni

Utility set awm tawh, tuna default-a responsive lote tan responsive class i enable thei bawk. Entirnan, borderclass-te chhanna pe thei tura siam turin:

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

Tunah chuan hei hian breakpoint tin .borderleh a tan responsive variation a siam dawn a ni. .border-0I CSS siam chu hetiang hian a awm ang:

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

Utilities te hming thlak leh rawh

v4 utilities awm lo, a nih loh leh naming convention dang hman tawh? Utilities API hi utility pek atanga result override nan hman theih a ni class—entir nan, .ms-*utilities hming chu oldish ah thlak theih a ni .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 ),
    ),
  )
);

Utilities te chu paih chhuak rawh

Default utility eng emaw zat chu group key chu null. Entirnan, kan widthutility zawng zawng paih vek tur chuan a siam la, a chhungah $utilities map-mergeadd rawh "width": null.

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

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

RTL ah utility chu paih chhuak rawh

Edge case thenkhat chuan RTL styling a ti harsa , Arabic tawnga line break ang chi te. rtlChutiang chuan utilities chu RTL output atang chuan option chu hetiang hian dahin drop theih a ni false:

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

Output: 1.1.

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

Hei hian RTL ah engmah a output lo a, RTLCSS removecontrol directive vang a ni .