Nusiwo le eme

Gɔmeɖoanyi ƒe klasswo

Bootstrap ƒe akpawo ƒe akpa gãtɔ nye esiwo wotu kple gɔmeɖoanyi-trɔtrɔ ŋkɔnya. Míeƒoa nɔnɔme siwo woama la nu ƒu ɖe gɔmeɖoanyi ƒe hatsotso me, abe , ene .btn, eye emegbe míeƒoa atsyã ɖekaɖekawo nu ƒu ɖe tɔtrɔ ɖesiaɖe me ɖe tɔtrɔ ƒe hatsotsowo me, abe .btn-primaryalo .btn-success.

Be míatu míaƒe modifier classes la, míezãa Sass ƒe @eachloops tsɔ gbugbɔa Sass map dzi. Esia kpena ɖe ame ŋu vevietɔ na akpa aɖe ƒe tɔtrɔwo wɔwɔ to míaƒe $theme-colorskple tɔtrɔ siwo ɖoa nya ŋu wɔwɔ na breakpoint ɖesiaɖe. Ne èle Sass ƒe anyigbatata siawo trɔm eye nègbugbɔ ƒo wo nu ƒu la, àkpɔ wò tɔtrɔwo le ɖokuiwò si wòadze le loop siawo me.

Kpɔ míaƒe Sass maps kple loops docs hena alesi nàtrɔ asi le loop siawo ŋu eye nàkeke Bootstrap ƒe base-modifier mɔnu ɖe ​​enu ɖe ​​wò ŋutɔ wò code dzi.

Nusiwo trɔa asi le nu ŋu

Wotu Bootstrap ƒe akpa geɖewo kple base-modifier class mɔnu. Esia fia be atsyã ƒe akpa gãtɔ le gɔmeɖoanyi ƒe hatsotso aɖe me (le kpɔɖeŋu me, .btn) esime atsyã ƒe tɔtrɔwo le tɔtrɔ ƒe hatsotsowo me ko (le kpɔɖeŋu me, .btn-danger). Wotu tɔtrɔɖenu ƒe hatsotso siawo tso $theme-colorsanyigbatata dzi be woawɔ tɔtrɔ ɖe míaƒe tɔtrɔ ƒe hatsotsowo ƒe xexlẽme kple ŋkɔ ŋu.

Alesi míewɔa loop ɖe $theme-colorsanyigbatata dzi tsɔ wɔa tɔtrɔwo ɖe .alertkple .list-groupakpawo ŋu ƒe kpɔɖeŋu evee nye esi.

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

Nyaŋuɖoɖo

Sass loop siawo menye amadede ƒe anyigbatatawo ɖeɖeko o, nenema ke. Àte ŋu awɔ wò akpawo ƒe tɔtrɔ siwo ɖoa nya ŋu hã. Kpɔ míaƒe ŋuɖoɖo ƒe ɖoɖowɔwɔ ɖe nusiwo le tsia dzi ŋu afisi míetsakaa @eachloop na $grid-breakpointsSass ƒe anyigbatata kple media biabia aɖe le eme le kpɔɖeŋu me.

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

Ne ètrɔ asi le wò $grid-breakpoints, wò tɔtrɔwo awɔ dɔ ɖe loop siwo katã gbugbɔna le anyigbatata ma dzi la dzi.

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

Ne èdi nyatakaka bubuwo kple kpɔɖeŋuwo tso alesi míatrɔ asi le míaƒe Sass anyigbatatawo kple tɔtrɔwo ŋu la, taflatse kpɔ Sass ƒe akpa si le Grid nuŋlɔɖiwo me .

Wò ŋutɔ tɔwò wɔwɔ

Míele dzi dem ƒo na wò be nàwɔ mɔfiame siawo ne èle xɔ tum kple Bootstrap be nàwɔ wò ŋutɔ wò akpawo. Mía ŋutɔwo míekeke mɔnu sia ɖe enu va ɖo akpa siwo wowɔ ɖe ɖoɖo nu le míaƒe nuŋlɔɖiwo kple kpɔɖeŋuwo me. Wotu akpawo abe míaƒe yɔyɔwo ene abe míaƒe akpa siwo míena kple gɔmeɖoanyi kple tɔtrɔ ƒe hatsotsowo ene.

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

Le wò CSS me la, àkpɔ nane abe esiawo ene afisi wowɔa atsyã ƒe akpa gãtɔ to .callout. Emegbe, wokpɔa atsyã tɔxɛ siwo le tɔtrɔ ɖesiaɖe dome dzi to modifier class dzi.

// Base class
.callout {}

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

Le yɔyɔawo gome la, atsyã tɔxɛ ma nye border-left-color. Ne èƒo gɔmeɖoanyi ƒe hatsotso ma nu ƒu kple tɔtrɔ ƒe hatsotso mawo dometɔ ɖeka la, àkpɔ wò akpa ƒe ƒome bliboa: