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ɔ	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, wɔanboaboa ano.
`class`	Ɛnyɛ ɔhyɛ	Variable ma class din no sɛ wompɛ sɛ ɛne agyapade no yɛ pɛ a. Sɛ ɛba sɛ woamfa safoa no amma `class`na `property`safoa no yɛ ahama a wɔahyehyɛ a, adesua din no bɛyɛ ade a edi kan wɔ `property`nhyehyɛe no mu.
`state`	Ɛnyɛ ɔhyɛ	List of pseudo-class variants te sɛ `:hover`anaasɛ `:focus`wobɛhyehyɛ ama utility no. Default value biara nni hɔ.
`responsive`	Ɛnyɛ ɔhyɛ	Boolean a ɛkyerɛ sɛ ebia ɛho hia sɛ wɔyɛ adesua ahorow a ɛyɛ mmuae anaa. `false`sɛnea ɛte no.
`rfs`	Ɛnyɛ ɔhyɛ	Boolean a ɛbɛma nsuo a wɔbɛsan ayɛ no atumi ayɛ adwuma. Hwɛ RFS krataafa no so na woahu sɛnea eyi yɛ adwuma. `false`sɛnea ɛte no.
`print`	Ɛnyɛ ɔhyɛ	Boolean a ɛkyerɛ sɛ ɛho hia sɛ wɔyɛ print class ahorow anaa. `false`sɛnea ɛte no.
`rtl`	Ɛnyɛ ɔhyɛ	Boolean a ɛkyerɛ sɛ ɛsɛ sɛ wɔde utility sie wɔ RTL mu anaa. `true`sɛnea ɛte no.

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

Amanneɛbɔ adesuakuw prefix

Fa classoption no sesa class prefix a wɔde di dwuma wɔ CSS a wɔaboaboa ano no mu:

$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; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

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

Nneɛma a wɔde di dwuma a ɛyɛ mmuae

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

Nneɛma a wɔde di dwuma a wɔresakra

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

Nneɛma a wɔde tintim nhoma

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ɛ ɛ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.

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

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

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

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

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

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

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

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

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

Yi default utilities no mu biara denam kuw safoa no a wode besi null. Sɛ nhwɛso no, sɛ wopɛ sɛ woyi yɛn widthutilities nyinaa fi hɔ a, yɛ a $utilities map-mergena fa ka ho "width": null.

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

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

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 .