Komponente

Basis klasse

Bootstrap se komponente is grootliks gebou met 'n basis-modifiseerder nomenklatuur. Ons groepeer soveel moontlik gedeelde eienskappe in 'n basisklas, soos .btn, en groepeer dan individuele style vir elke variant in wysigerklasse, soos .btn-primaryof .btn-success.

Om ons wysigerklasse te bou, gebruik ons ​​Sass se @eachlusse om oor 'n Sass-kaart te herhaal. Dit is veral nuttig om variante van 'n komponent deur ons te genereer $theme-colorsen responsiewe variante vir elke breekpunt te skep. Soos jy hierdie Sass-kaarte pasmaak en hersaamstel, sal jy outomaties jou veranderinge in hierdie lusse weerspieël sien.

Kyk na ons Sass-kaarte en -lusse-dokumente vir hoe om hierdie lusse aan te pas en Bootstrap se basiswysiger-benadering na jou eie kode uit te brei.

Wysigers

Baie van Bootstrap se komponente is gebou met 'n basis-modifiseerder klas benadering. Dit beteken die grootste deel van die stilering is in 'n basisklas (bv. .btn) vervat terwyl stylvariasies beperk is tot wysigerklasse (bv. .btn-danger). Hierdie wysigerklasse word vanaf die $theme-colorskaart gebou om die nommer en naam van ons wysigerklasse aan te pas.

Hier is twee voorbeelde van hoe ons oor die $theme-colorskaart loop om wysigers vir die .alerten .list-groupkomponente te genereer.

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

Responsief

Hierdie Sass-lusse is ook nie beperk tot kleurkaarte nie. U kan ook responsiewe variasies van u komponente genereer. Neem byvoorbeeld ons responsiewe belyning van die dropdowns waar ons 'n @eachlus vir die $grid-breakpointsSass-kaart meng met 'n media-navraag insluit.

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

Indien jy jou wysig $grid-breakpoints, sal jou veranderinge van toepassing wees op al die lusse wat oor daardie kaart herhaal.

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

Vir meer inligting en voorbeelde oor hoe om ons Sass-kaarte en veranderlikes te wysig, verwys asseblief na die Sass-afdeling van die Grid-dokumentasie .

Skep jou eie

Ons moedig u aan om hierdie riglyne aan te neem wanneer u met Bootstrap bou om u eie komponente te skep. Ons het hierdie benadering self uitgebrei na die pasgemaakte komponente in ons dokumentasie en voorbeelde. Komponente soos ons uitroepe is gebou net soos ons voorsiende komponente met basis- en wysigerklasse.

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

In jou CSS sal jy iets soos die volgende hê waar die grootste deel van die stilering via .callout. Dan word die unieke style tussen elke variant beheer via wysigerklas.

// Base class
.callout {}

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

Vir die uitroepe is daardie unieke stilering net 'n border-left-color. Wanneer jy daardie basisklas met een van daardie wysigerklasse kombineer, kry jy jou volledige komponentfamilie: