Nneɛma a ɛwom

Base adesua ahorow

Bootstrap no afã horow no fã kɛse no ara yɛ nea wɔde base-modifier nomenclature na esii. Yɛkyekyɛ agyapadeɛ dodoɔ a wɔakyekyɛ mu sɛdeɛ ɛbɛyɛ yie biara mu wɔ base class mu, te sɛ .btn, na afei yɛkyekyɛ ankorankoro styles ma variant biara mu ma ɛyɛ modifier classes, te sɛ .btn-primaryanaa .btn-success.

Sɛ yɛbɛkyekyere yɛn modifier classes no a, yɛde Sass's @eachloops no di dwuma de yɛ iterate wɔ Sass map so. Eyi boa titiriw ma generating variants of a component by yɛn $theme-colorsna yɛbɔ mmuae variants ma breakpoint biara. Bere a woreyɛ Sass maps yi ho nhyehyɛe na woasan aboaboa ano no, wubehu wo nsakrae no a ɛda adi wɔ saa loop ahorow yi mu no ara kwa.

Hwɛ yɛn Sass maps ne loops docs ma sɛnea wobɛsesa saa loops yi na woatrɛw Bootstrap base-modifier kwan no mu akɔ w’ankasa code so.

Nneɛma a Wɔsesa

Bootstrap no afã horow no pii yɛ nea wɔde base-modifier class kwan na ɛkyekye. Wei kyerɛ sɛ styling no fã kɛseɛ no ara wɔ base class (sɛ nhwɛsoɔ no, .btn) berɛ a style variations no wɔ modifier classes (sɛ nhwɛsoɔ no, .btn-danger) mu nko ara. Saa modifier classes yi wɔasi firi $theme-colorsmap no so de yɛ customizing nɔma ne din a yɛn modifier classes no.

Nhwɛsoɔ mmienu a ɛkyerɛ sɛdeɛ yɛde loop wɔ $theme-colorsmap no so de yɛ modifiers to the .alertand .list-groupcomponents no nie.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Mmuae a wɔde ma

Saa Sass loops yi nyɛ kɔla maps nko ara, nso. Wubetumi nso ayɛ wo components no mu nsakrae a ɛyɛ mmuae. Fa nhwɛsoɔ yɛn mmuaeɛ alignment a ɛfa dropdowns a yɛde fra @eachloop ma $grid-breakpointsSass map no ne media query ka ho.

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

Sɛ ɛsɛ sɛ wosakra wo $grid-breakpoints, wo nsakrae no bɛfa loop ahorow a ɛresan ayɛ wɔ saa asase mfonini no so no nyinaa ho.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Sɛ wopɛ nsɛm pii ne nhwɛsoɔ a ɛfa sɛdeɛ yɛbɛsesa yɛn Sass maps ne variables a, yɛsrɛ wo hwɛ Sass ɔfa a ɛwɔ Grid nkrataa no mu .

Wo de a wobɛbɔ

Yɛhyɛ wo nkuran sɛ fa akwankyerɛ yi tom bere a wode Bootstrap resi dan no de ayɛ w’ankasa nneɛma ahorow. Yɛn ankasa atrɛw saa kwan yi mu akɔ amanne afã horow a ɛwɔ yɛn nkrataa ne nhwɛso ahorow mu no mu. Components te sɛ yɛn callouts no wɔasi te sɛ yɛn components a yɛde ama a ɛwɔ base ne modifier classes no ara pɛ.

<div class="callout">...</div>

Wɔ wo CSS mu no, anka wobɛnya biribi te sɛ deɛ ɛdidi soɔ yi baabi a wɔyɛ styling no fã kɛseɛ no ara via .callout. Afei, wɔhyɛ ɔkwan soronko a ɛda variant biara ntam no so denam modifier class so.

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

Wɔ callouts no fam no, saa styling soronko no yɛ border-left-color. Sɛ wode saa base class no ne saa modifier class ahorow no mu biako bom a, wubenya wo component abusua a edi mũ: