Componenten

Basisklassen

De componenten van Bootstrap zijn grotendeels gebouwd met een base-modifier-nomenclatuur. We groeperen zoveel mogelijk gedeelde eigenschappen in een basisklasse, zoals .btn, en groeperen vervolgens individuele stijlen voor elke variant in modificatieklassen, zoals .btn-primaryof .btn-success.

Om onze modificatieklassen te bouwen, gebruiken we de @eachlussen van Sass om een ​​Sass-kaart te doorlopen. Dit is vooral handig voor het genereren van varianten van een component door onze $theme-colorsen het maken van responsieve varianten voor elk breekpunt. Terwijl u deze Sass-kaarten aanpast en opnieuw compileert, ziet u uw wijzigingen automatisch weerspiegeld in deze lussen.

Bekijk onze Sass-kaarten en loops -documenten voor het aanpassen van deze loops en het uitbreiden van de basismodificatiebenadering van Bootstrap naar uw eigen code.

Modifiers

Veel van Bootstrap's componenten zijn gebouwd met een base-modifier class-benadering. Dit betekent dat het grootste deel van de styling is opgenomen in een basisklasse (bijv. .btn), terwijl stijlvariaties beperkt zijn tot modificatieklassen (bijv. .btn-danger). Deze modifier-klassen zijn opgebouwd uit de $theme-colorskaart om het aantal en de naam van onze modifier-klassen aan te passen.

Hier zijn twee voorbeelden van hoe we over de $theme-colorskaart lopen om modifiers voor de .alerten .list-groupcomponenten te genereren.

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

Snel reagerend

Deze Sass-loops zijn ook niet beperkt tot kleurenkaarten. U kunt ook responsieve varianten van uw componenten genereren. Neem bijvoorbeeld onze responsieve uitlijning van de vervolgkeuzelijsten waarbij we een @eachlus voor de $grid-breakpointsSass-kaart mixen met een mediaquery include.

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

Als u uw $grid-breakpoints, wijzigt, zijn uw wijzigingen van toepassing op alle lussen die over die kaart itereren.

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

Raadpleeg de Sass-sectie van de Grid-documentatie voor meer informatie en voorbeelden over het wijzigen van onze Sass-kaarten en -variabelen .

Zelf maken

We raden u aan deze richtlijnen te volgen wanneer u met Bootstrap bouwt om uw eigen componenten te maken. We hebben deze aanpak zelf uitgebreid naar de aangepaste componenten in onze documentatie en voorbeelden. Componenten zoals onze callouts zijn net zo gebouwd als de door ons geleverde componenten met basis- en modificatieklassen.

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

In je CSS zou je zoiets hebben als het volgende, waarbij het grootste deel van de styling wordt gedaan via .callout. Vervolgens worden de unieke stijlen tussen elke variant beheerd via modificatieklasse.

// Base class
.callout {}

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

Voor de highlights is die unieke styling slechts een border-left-color. Wanneer je die basisklasse combineert met een van die modificatieklassen, krijg je je volledige componentenfamilie: