Komponenten

Basis Klassen

Bootstrap Komponente si gréisstendeels mat enger Basismodifikateur Nomenclature gebaut. Mir gruppéiere sou vill gedeelt Eegeschafte wéi méiglech an eng Basisklass, wéi .btn, a gruppéiere dann eenzel Stiler fir all Variant an Modifikateurklassen, wéi .btn-primaryoder .btn-success.

Fir eis Modifizéierungsklassen ze bauen, benotze mir Sass's @eachLoops fir iwwer eng Sass Kaart ze iteréieren. Dëst ass besonnesch hëllefräich fir Varianten vun engem Komponent vun eisem ze generéieren $theme-colorsan reaktiounsfäeger Varianten fir all Breakpoint ze kreéieren. Wéi Dir dës Sass Kaarten personaliséiert an nei kompiléiert, gesitt Dir automatesch Är Ännerungen an dëse Loops reflektéiert.

Préift eis Sass Kaarten a Loops Dokumenter fir wéi Dir dës Loops personaliséiere kënnt an dem Bootstrap seng Basismodifier Approche op Ären eegene Code verlängeren.

Modifiers

Vill vun Bootstrap Komponente si mat enger Basis-Modifier Klass Approche gebaut. Dëst bedeit datt de gréissten Deel vum Styling zu enger Basisklass enthale gëtt (zB, .btn) wärend Stilvariatioune limitéiert sinn op Modifizéierungsklassen (zB. .btn-danger). Dës Modifizéierungsklassen sinn aus der $theme-colorsKaart gebaut fir d'Zuel an den Numm vun eise Modifikatiounsklassen ze personaliséieren.

Hei sinn zwee Beispiller vu wéi mir iwwer d' $theme-colorsKaart schloen fir Modifikateure fir d' .alerta .list-groupKomponenten ze generéieren.

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

Reaktiounsfäeger

Dës Sass Loops sinn och net limitéiert op Faarfkaarten. Dir kënnt och reaktiounsfäeger Variatiounen vun Äre Komponenten generéieren. Huelt zum Beispill eis reaktiounsfäeger Ausrichtung vun den Dropdowns, wou mir eng @eachLoop fir d' $grid-breakpointsSass Kaart mat enger Medienufro vermëschen.

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

Sollt Dir $grid-breakpointsÄert Änneren änneren, gëllen Är Ännerungen op all d'Schleifen, déi iwwer dës Kaart iteréieren.

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

Fir méi Informatioun a Beispiller wéi Dir eis Sass Kaarten a Variablen ännere kënnt, kuckt w.e.g. op d'Sass Sektioun vun der Grid Dokumentatioun .

Schafen Är eege

Mir encouragéieren Iech dës Richtlinnen unzehuelen wann Dir mam Bootstrap baut fir Är eege Komponenten ze kreéieren. Mir hunn dës Approche selwer op déi personaliséiert Komponenten an eiser Dokumentatioun an Beispiller verlängert. Komponente wéi eis Callouts si gebaut wéi eis geliwwert Komponenten mat Basis- a Modifizéierungsklassen.

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

An Ärer CSS hätt Dir eppes wéi de folgende wou de gréissten Deel vum Styling iwwer .callout. Dann ginn déi eenzegaarteg Stiler tëscht all Variant iwwer Modifikateur Klass kontrolléiert.

// Base class
.callout {}

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

Fir d'Callouts ass deen eenzegaartege Styling just e border-left-color. Wann Dir dës Basisklass mat enger vun dësen Modifizéierungsklassen kombinéiert, kritt Dir Är komplett Komponentfamill: