Komponenter

Basisklasser

Bootstraps komponenter er stort set bygget med en base-modifikator nomenklatur. Vi grupperer så mange delte egenskaber som muligt i en basisklasse, f.eks .btn. , og grupperer derefter individuelle stilarter for hver variant i modifikatorklasser, f.eks . .btn-primaryeller .btn-success.

For at bygge vores modifikatorklasser bruger vi Sass's @eachloops til at iterere over et Sass-kort. Dette er især nyttigt til at generere varianter af en komponent af vores $theme-colorsog skabe responsive varianter for hvert breakpoint. Når du tilpasser disse Sass-kort og kompilerer igen, vil du automatisk se dine ændringer afspejlet i disse loops.

Tjek vores Sass-kort og loops-dokumenter for, hvordan du tilpasser disse loops og udvider Bootstraps base-modifier-tilgang til din egen kode.

Modifikatorer

Mange af Bootstraps komponenter er bygget med en base-modifier klasse tilgang. Dette betyder, at hovedparten af ​​stylingen er indeholdt i en basisklasse (f.eks. .btn), mens stilvariationer er begrænset til modifikatorklasser (f.eks. .btn-danger). Disse modifikatorklasser er bygget ud fra $theme-colorskortet for at tilpasse antallet og navnet på vores modifikatorklasser.

Her er to eksempler på, hvordan vi sløjfer over $theme-colorskortet for at generere modifikatorer til .alertog - .list-groupkomponenterne.

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

Lydhør

Disse Sass-loops er heller ikke begrænset til farvekort. Du kan også generere responsive variationer af dine komponenter. Tag for eksempel vores responsive justering af rullemenuerne, hvor vi blander en @eachloop til $grid-breakpointsSass-kortet med en medieforespørgsel.

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

Hvis du ændrer din $grid-breakpoints, vil dine ændringer gælde for alle de løkker, der itererer over det pågældende kort.

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

For mere information og eksempler på, hvordan man ændrer vores Sass-kort og variabler, henvises til Sass-sektionen i Grid-dokumentationen .

At skabe din egen

Vi opfordrer dig til at følge disse retningslinjer, når du bygger med Bootstrap for at skabe dine egne komponenter. Vi har selv udvidet denne tilgang til de brugerdefinerede komponenter i vores dokumentation og eksempler. Komponenter som vores billedforklaringer er bygget ligesom vores leverede komponenter med basis- og modifikationsklasser.

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

In your CSS, you’d have something like the following where the bulk of the styling is done via .callout. Then, the unique styles between each variant is controlled via modifier class.

// Base class
.callout {}

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

For the callouts, that unique styling is just a border-left-color. When you combine that base class with one of those modifier classes, you get your complete component family: