Komponenten

Basisklassen

Die Komponenten von Bootstrap sind größtenteils mit einer Base-Modifier-Nomenklatur aufgebaut. Wir gruppieren so viele gemeinsam genutzte Eigenschaften wie möglich in einer Basisklasse, wie .btn, und gruppieren dann einzelne Stile für jede Variante in Modifikatorklassen, wie .btn-primaryoder .btn-success.

Um unsere Modifikatorklassen zu erstellen, verwenden wir die @eachSchleifen von Sass, um über eine Sass-Map zu iterieren. Dies ist besonders hilfreich, um Varianten einer Komponente von uns zu generieren $theme-colorsund reaktionsschnelle Varianten für jeden Haltepunkt zu erstellen. Wenn Sie diese Sass-Karten anpassen und neu kompilieren, werden Ihre Änderungen automatisch in diesen Schleifen widergespiegelt.

Sehen Sie sich unsere Dokumente zu Sass-Karten und Schleifen an, um zu erfahren, wie Sie diese Schleifen anpassen und den Basismodifikator-Ansatz von Bootstrap auf Ihren eigenen Code erweitern können.

Modifikatoren

Viele der Bootstrap-Komponenten werden mit einem Basis-Modifikator-Klassenansatz erstellt. Das bedeutet, dass der Großteil des Stils in einer Basisklasse (z. B. .btn) enthalten ist, während Stilvariationen auf Modifikatorklassen (z . B. ) beschränkt sind .btn-danger. Diese Modifikatorklassen werden aus der $theme-colorsKarte erstellt, um die Anzahl und den Namen unserer Modifikatorklassen anzupassen.

Hier sind zwei Beispiele dafür, wie wir die $theme-colorsKarte durchlaufen, um Modifikatoren für die Komponenten .alertund zu generieren..list-group

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

Reaktionsschnell

Diese Sass-Loops sind auch nicht auf Farbkarten beschränkt. Sie können auch responsive Variationen Ihrer Komponenten generieren. Nehmen Sie zum Beispiel unsere reaktionsschnelle Ausrichtung der Dropdowns, bei der wir eine @eachSchleife für die $grid-breakpointsSass-Karte mit einer Medienabfrage mischen.

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

Sollten Sie Ihre ändern $grid-breakpoints, gelten Ihre Änderungen für alle Schleifen, die über diese Karte iterieren.

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

Weitere Informationen und Beispiele zum Ändern unserer Sass-Maps und -Variablen finden Sie im Sass-Abschnitt der Grid-Dokumentation .

Eigene erstellen

Wir empfehlen Ihnen, diese Richtlinien zu übernehmen, wenn Sie mit Bootstrap bauen, um Ihre eigenen Komponenten zu erstellen. Wir haben diesen Ansatz selbst auf die benutzerdefinierten Komponenten in unserer Dokumentation und unseren Beispielen ausgedehnt. Komponenten wie unsere Callouts werden genau wie unsere bereitgestellten Komponenten mit Basis- und Modifikatorklassen erstellt.

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

In Ihrem CSS hätten Sie so etwas wie das Folgende, wo der Großteil des Stylings über erfolgt .callout. Dann werden die einzigartigen Stile zwischen den einzelnen Varianten über die Modifikatorklasse gesteuert.

// Base class
.callout {}

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

Für die Callouts ist dieses einzigartige Styling nur eine border-left-color. Wenn Sie diese Basisklasse mit einer dieser Modifikatorklassen kombinieren, erhalten Sie Ihre vollständige Komponentenfamilie: