API a wɔde di dwuma

Utility API no yɛ Sass-gyina adwinnade a wɔde yɛ utility adesua ahorow.

Wɔ kratafa yi so

Bootstrap utilities no wɔde yɛn utility API na ɛyɛ na wobetumi de adi dwuma de asesa anaa atrɛw yɛn default set of utility classes no mu denam Sass so. Yɛn utility API no gyina Sass maps ne dwumadie ahodoɔ a wɔde yɛ mmusua a ɛwɔ adesua ahodoɔ a ɛwɔ akwan ahodoɔ so. Sɛ wo nnim Sass maps a, kenkan kɔ soro wɔ official Sass docs no so na woahyɛ aseɛ.

Map no $utilitieskura yɛn utilities nyinaa na akyiri yi wɔde ka wo custom $utilitiesmap no ho, sɛ ɛwɔ hɔ a. Utility map no kura keyed list a utility akuo ahodoɔ a ɛgye akwan a ɛdidi soɔ yi tom:

Ɔpɛ	Korɔ	Default bo a ɛsom	Nkyerɛmu
`property`	Ɛhia	– .	Agyapadeɛ no din, yei betumi ayɛ ahama anaa nhama a wɔahyehyɛ (sɛ nhwɛsoɔ no, horizontal paddings anaa margins).
`values`	Ɛhia	– .	Kyerɛw botae ahorow, anaa asase mfonini sɛ wompɛ sɛ adesuakuw no din ne botae no bɛyɛ pɛ a. Sɛ `null`wɔde di dwuma sɛ map key a, `class`ɛnyɛ prepended to class din.
`class`	Ɛnyɛ ɔhyɛ	ohunu	Edin a wɔde frɛ adesuakuw a wɔayɛ no. Sɛ wɔamfa amma na `property`ɛyɛ nhama a wɔahyehyɛ a, `class`ɛbɛ default akɔ element a edi kan wɔ `property`nhyehyɛe no mu. Sɛ wɔamfa amma na `property`ɛyɛ ahama a, wɔde `values`nsafe no di dwuma ma `class`edin ahorow no.
`css-var`	Ɛnyɛ ɔhyɛ	`false`	Boolean a ɛbɛma woanya CSS nsakrae ahorow sen sɛ ɛbɛyɛ CSS mmara.
`css-variable-name`	Ɛnyɛ ɔhyɛ	ohunu	Amanneɛbɔ din a enni anim ma CSS nsakrae wɔ mmara nhyehyɛe no mu.
`local-vars`	Ɛnyɛ ɔhyɛ	ohunu	Map a ɛkyerɛ mpɔtam hɔ CSS nsakrae ahorow a wɔde bɛyɛ de aka CSS mmara no ho.
`state`	Ɛnyɛ ɔhyɛ	ohunu	List of pseudo-class variants (sɛ nhwɛso no, `:hover`anaa `:focus`) a wɔde bɛma.
`responsive`	Ɛnyɛ ɔhyɛ	`false`	Boolean a ɛkyerɛ sɛ ɛsɛ sɛ wɔyɛ adesua ahorow a ɛyɛ mmuae anaa.
`rfs`	Ɛnyɛ ɔhyɛ	`false`	Boolean a ɛbɛma nsuo rescaling atumi de RFS ayɛ adwuma .
`print`	Ɛnyɛ ɔhyɛ	`false`	Boolean a ɛkyerɛ sɛ ɛho hia sɛ wɔyɛ print class ahorow anaa.
`rtl`	Ɛnyɛ ɔhyɛ	`true`	Boolean a ɛkyerɛ sɛ ɛsɛ sɛ wɔde utility sie wɔ RTL mu anaa.

API kyerɛkyerɛɛ mu

Wɔde utility variables nyinaa aka $utilitiesvariable no ho wɔ yɛn _utilities.scssstylesheet no mu. utilities kuw biara hwɛ biribi te sɛ eyi:

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

Nea ɛde nea edidi so yi ba:

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

Agyapadeɛ

Ɛsɛ sɛ wɔde safoa a wɔhwehwɛ propertyno si hɔ ma mfaso biara, na ɛsɛ sɛ ɛwɔ CSS agyapade a ɛfata. Saa agyapade yi na wɔde di dwuma wɔ generated utility no mmara nhyehyɛe no mu. Sɛ woyi classsafoa no fi mu a, ɛsan nso yɛ default class din. Susuw text-decorationmfaso a ɛwɔ so no ho:

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

Nea efi mu ba:

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

Nneɛma a Ɛsom Bo

Fa valuessafoa no kyerɛ botae ahorow a propertyɛsɛ sɛ wɔde di dwuma ma nea wɔakyerɛ no wɔ adesuakuw din ne mmara a wɔayɛ no mu. Ebetumi ayɛ list anaa map (a wɔde asi hɔ wɔ utilities no mu anaasɛ wɔ Sass variable mu).

Sɛ́ list no, te sɛ nea ɛfa text-decorationutilities ho :

values: none underline line-through

Sɛ́ asase mfonini no, te sɛ nea ɛfa opacityutilities ho no :

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

Sɛ́ Sass variable a ɛde list anaa map no si hɔ, sɛnea ɛte wɔ yɛn positionutilities no mu no :

values: $position-values

Klaase

Fa classoption no sesa class prefix a wɔde di dwuma wɔ CSS a wɔaboaboa ano no mu. Sɛ nhwɛso no, sɛ wopɛ sɛ wosakra fi .opacity-*kɔ .o-*:

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

Nea efi mu ba:

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

Sɛ class: null, generates classes ma valueskeys no mu biara:

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

Nea efi mu ba:

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

CSS nsakraeɛ a wɔde di dwuma

Set css-varboolean option no to truena API no bɛma local CSS variables ama selector a wɔde ama no sen sɛ ɛbɛyɛ mmara a wɔtaa de property: valuedi dwuma no. Fa optional bi ka ho css-variable-namena fa CSS variable din soronko bi si hɔ sen class din no.

Susuw yɛn .text-opacity-*utilities ho hwɛ. Sɛ yɛde css-variable-nameoption no ka ho a, yebenya custom output.

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

Nea efi mu ba:

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

Mpɔtam hɔ CSS nsakrae ahorow

Fa local-varsnhyehyeɛ no kyerɛ Sass map a ɛbɛma mpɔtam hɔ CSS nsakraeɛ aba wɔ utility class no mmara nhyehyɛeɛ no mu. Yɛsrɛ wo hyɛ no nsow sɛ ebia ɛbɛhwehwɛ adwuma foforo de adi saa mpɔtam hɔ CSS nsakrae ahorow no wɔ CSS mmara a wɔayɛ no mu. Sɛ nhwɛso no, susuw yɛn .bg-*utilities ho:

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

Nea efi mu ba:

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

Aman ahorow

Fa stateoption no yɛ pseudo-class nsakrae ahorow. Nhwɛso a ɛyɛ pseudo-classes ne :hoverne :focus. Sɛ wɔde tebea ahorow a wɔahyehyɛ ma a, wɔyɛ adesuakuw din ahorow ma saa pseudo-class no. Sɛ nhwɛso no, sɛ wopɛ sɛ wosakra opacity wɔ hover so a, fa ka ho state: hoverna wubenya .opacity-hover:hoverwo CSS a woaboaboa ano no mu.

Wohia pseudo-classes pii? Fa tebea horow a wɔahyehyɛ a wɔde ahunmu atew mu di dwuma: state: hover focus.

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

Nea efi mu ba:

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

Mmuae a wɔde ma

Fa responsiveboolean no ka ho na woanya mmuaeɛ utilities (sɛ nhwɛsoɔ, .opacity-md-25) wɔ breakpoints nyinaa so .

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

Nea efi mu ba:

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

Print

Sɛ woma printoption no yɛ adwuma a, ɛbɛma utility classes nso aba ama print, a wɔde di dwuma wɔ @media print { ... }media query no mu nkutoo.

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

Nea efi mu ba:

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

Nea ɛho hia

utilities a API no ayɛ nyinaa ka ho !importantsɛ wɔbɛhwɛ sɛ wɔbɛbu components ne modifier classes so sɛdeɛ wɔahyɛ da ayɛ no. Wubetumi de $enable-important-utilitiesnsakrae (defaults to true).

API no a wode bedi dwuma

Seesei a woanim sɛnea utilities API no yɛ adwuma no, sua sɛnea wode w’ankasa custom classes bɛka ho na woasesa yɛn default utilities no.

Twe nneɛma a wɔde di dwuma no so

Fa safoa koro no ara a wode bedi dwuma no tow utilities a ɛwɔ hɔ dedaw no so. Sɛ nhwɛso no, sɛ wopɛ responsive overflow utility classes foforo a, wubetumi ayɛ eyi:

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

Fa nneɛma a wɔde di dwuma ka ho

Wobetumi de utilities foforo aka default $utilitiesmap no ho denam map-merge. Hwɛ sɛ yɛn Sass fael a yɛhwehwɛ no na _utilities.scsswɔde aba kan, afei fa di dwuma map-mergede fa wo utilities foforo no ka ho. Sɛ nhwɛso no, sɛnea wode responsive cursorutility a ɛwɔ values abiɛsa bɛka ho ni.

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

Sesa nneɛma a wɔde di dwuma

Sesa utilities a ɛwɔ hɔ dedaw wɔ default $utilitiesmap no mu ne map-getne map-mergedwumadi ahorow. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛde boɔ foforɔ bi rebɛka widthutilities no ho. Fi ase de mfiase map-mergena afei kyerɛ utility a wopɛ sɛ wosakra no. Efi hɔ, fa nested "width"map no ne map-getna woanya na woasesa utility no options ne values.

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

Ma mmuae a wɔde ma no nyɛ adwuma

Wubetumi ama mmuae adesua ahorow no ayɛ adwuma ama utilities ahorow a ɛwɔ hɔ dedaw a mprempren ɛnyɛ mmuae wɔ default so. Sɛ nhwɛso no, sɛnea ɛbɛyɛ a borderadesua ahorow no bɛyɛ nea ɛfata:

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

Afei eyi bɛma mmuae nsakrae ahorow aba .borderne .border-0nea ɛfa breakpoint biara ho. Wo CSS a woayɛ no bɛyɛ sɛ eyi:

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

Sesa utilities din

V4 utilities a ɛyera, anaasɛ woasua din foforo nhyiam? Wobetumi de utilities API no adi dwuma de abɔ nea efi classutility bi a wɔde ama mu aba no so—sɛ nhwɛso no, sɛ wɔbɛsesa .ms-*utilities din ayɛ no dedaw .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";

Yi nneɛma a wɔde di dwuma no fi hɔ

Yi default utilities no mu biara fi hɔ denam map-remove()Sass adwuma no so .

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

Wubetumi nso de map-merge()Sass adwuma no adi dwuma na wode kuw safoa no ahyɛ mu nullde ayi mfaso no afi hɔ.

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

Fa ka ho, yi fi hɔ, sesa

map-merge()Wubetumi de Sass adwuma no aka nneɛma pii ho, ayi afi hɔ, na woasesa no prɛko pɛ . Sɛnea wubetumi de nhwɛso ahorow a atwam no abom ayɛ no asase mfonini kɛse biako ni.

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

Yi utility no fi hɔ wɔ RTL mu

Edge cases binom ma RTL styling yɛ den , te sɛ line breaks wɔ Arabic kasa mu. Enti wobetumi ato utilities afi RTL output no mu denam rtloption no a wode besi hɔ sɛ false: .

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

Nea efi mu ba:

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

Eyi nkyerɛ biribiara wɔ RTL mu, esiane RTLCSS removecontrol directive nti .