Di tin dɛn we de insay di bɔdi

Base klas dɛn

Bootstrap in komponent dɛn big wan bil wit wan bays-modifaya nomenklachɔ. Wi de grup bɔku shered prɔpati dɛn as pɔsibul insay wan bays klas, lɛk .btn, ɛn afta dat wi grup wan wan stayl dɛn fɔ ɛni vayriɔnt insay modifya klas dɛn, lɛk .btn-primaryɔ .btn-success.

Fɔ bil wi modifya klas dɛn, wi de yuz Sass in @eachlɔp dɛn fɔ itɛrayt oba wan Sass map. Dis na spεshal εp fכ jεnarεt vεryכnt dεm fכ wan kכmכpכnt bay wi $theme-colorsεn kriyayt rεspכnsiv vεryכnt dεm fכ εvri brekpכynt. As yu de kɔstɔmayz dɛn Sass map dɛn ya ɛn kɔmpilayt bak, yu go ɔtomɛtik si yu chenj dɛn we de sho na dɛn lɔp dɛn ya.

Chek wi Sass map ɛn loops docs fɔ aw fɔ kɔstɔmayz dɛn loops ya ɛn ɛkstɛnd Bootstrap in bays-modifier aprɔch to yu yon kɔd.

Di wan dɛn we de chenj di tin dɛn

Bɔku pan Bootstrap in kɔmpɔnɛnt dɛn bil wit wan bays-mɔdifaya klas aprɔch. Dis min se di bɔku bɔku stayl de insay wan bays klas (ɛgz., .btn) we di stayl chenj dɛn de kɔnfyus to modifya klas dɛn (ɛgz., .btn-danger). Dɛn bil dɛn modifya klas ya frɔm di $theme-colorsmap fɔ mek kɔstɔmayz di nɔmba ɛn nem fɔ wi modifya klas dɛn.

Na tu ɛgzampul dɛn ya bɔt aw wi de lɔp oba di $theme-colorsmap fɔ jenarayz modifya dɛn to di .alertɛn .list-groupkɔmpɔnɛnt dɛn.

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

Fɔ ansa

Dis Sass loops nor de limited to kala map, tu. Yu kin jεnarεt rεspכns vεryushכn dεm bak fכ yu kכmכpכnt dεm. Tek fɔ ɛgzampul wi rispɔnsiv alaynɛshɔn fɔ di drɔpdɔwn dɛn usay wi miks wan @eachlɔp fɔ di $grid-breakpointsSass map wit wan midia kwɛstyɔn inklud.

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

If yu chenj yu $grid-breakpoints, yu chenj dɛn go aplay to ɔl di lɔp dɛn we de itɛrayt oba da map de.

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

Fɔ no mɔ ɛn ɛgzampul dɛn bɔt aw fɔ chenj wi Sass map ɛn vɛriɔbul dɛn, duya luk na di Sass sɛkshɔn na di Grid dɔkyumentri .

Fɔ mek yu yon

Wi de ɛnkɔrej yu fɔ adopt dɛn gaydlayn ya we yu de bil wit Bootstrap fɔ mek yu yon kɔmpɔnɛnt dɛn. Wi dɔn ɛkstɛnd dis we fɔ du tin wisɛf to di kɔstɔm kɔmpɔnɛnt dɛn we de na wi dɔkyumentri ɛn ɛgzampul dɛn. Kɔmpɔnɛnt dɛn lɛk wi kɔlɔut dɛn bil jɔs lɛk wi kɔmpɔnɛnt dɛn we wi dɔn gi wit bays ɛn modifya klas dɛn.

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

Insay yu CSS, yu go gɛt sɔntin lɛk di wan dɛn we de dɔŋ ya usay dɛn kin du bɔku pan di stayl via .callout. Dɔn, di yunik stayl dɛn bitwin ɛni vayriɔnt de kɔntrol via modifya klas.

// Base class
.callout {}

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

Fɔ di kɔl-ɔut dɛn, da spɛshal stayl de na jɔs wan border-left-color. We yu jɔyn da bays klas de wit wan pan dɛn modifya klas dɛn de, yu kin gɛt yu kɔmplit kɔmpɔnɛnt famili: