Komponenter

Basklasser

Bootstraps komponenter är till stor del byggda med en basmodifieringsnomenklatur. Vi grupperar så många delade egenskaper som möjligt i en basklass, som .btn, och grupperar sedan individuella stilar för varje variant i modifieringsklasser, som .btn-primaryeller .btn-success.

För att bygga våra modifieringsklasser använder vi Sass @eachloopar för att iterera över en Sass-karta. Detta är särskilt användbart för att generera varianter av en komponent av vår $theme-colorsoch skapa responsiva varianter för varje brytpunkt. När du anpassar dessa Sass-kartor och kompilerar om, kommer du automatiskt att se dina ändringar återspeglas i dessa loopar.

Kolla in våra Sass-kartor och loopdokument för hur du anpassar dessa loopar och utökar Bootstraps basmodifieringsmetod till din egen kod.

Modifierare

Många av Bootstraps komponenter är byggda med en basmodifieringsklassmodell. Detta innebär att huvuddelen av stilen finns i en basklass (t.ex. .btn) medan stilvariationer är begränsade till modifieringsklasser (t.ex. .btn-danger). Dessa modifieringsklasser är byggda från $theme-colorskartan för att anpassa antalet och namnet på våra modifieringsklasser.

Här är två exempel på hur vi loopar över $theme-colorskartan för att generera modifierare till komponenterna .alertoch ..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);
}

Mottaglig

Dessa Sass-loopar är inte heller begränsade till färgkartor. Du kan också skapa responsiva varianter av dina komponenter. Ta till exempel vår responsiva anpassning av rullgardinsmenyn där vi blandar en @eachloop för $grid-breakpointsSass-kartan med en mediefråga.

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

Om du ändrar din $grid-breakpoints, kommer dina ändringar att gälla för alla loopar som itererar över kartan.

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

För mer information och exempel på hur du ändrar våra Sass-kartor och variabler, se Sass-avsnittet i Grid-dokumentationen .

Skapa din egen

Vi uppmuntrar dig att använda dessa riktlinjer när du bygger med Bootstrap för att skapa dina egna komponenter. Vi har själva utökat detta tillvägagångssätt till de anpassade komponenterna i vår dokumentation och exempel. Komponenter som våra bildtexter är byggda precis som våra medföljande komponenter med bas- och modifieringsklasser.

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

I din CSS skulle du ha något i stil med följande där huvuddelen av stylingen görs via .callout. Sedan styrs de unika stilarna mellan varje variant via modifieringsklass.

// Base class
.callout {}

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

För bildtexterna är den unika stylingen bara en border-left-color. När du kombinerar den basklassen med en av dessa modifieringsklasser får du din kompletta komponentfamilj: