Components

Basisklassen

De komponinten fan Bootstrap binne foar in grut part boud mei in nomenklatuer foar basismodifikaasje. Wy groepearje safolle mooglik dielde eigenskippen yn in basisklasse, lykas .btn, en groepearje dan yndividuele stilen foar elke fariant yn modifierklassen, lykas .btn-primaryof .btn-success.

Om ús modifier-klassen te bouwen, brûke wy de @eachloops fan Sass om te iterearjen oer in Sass-kaart. Dit is benammen nuttich foar it generearjen fan farianten fan in komponint troch ús $theme-colorsen it meitsjen fan responsive farianten foar elk brekpunt. Wylst jo dizze Sass-kaarten oanpasse en opnij kompilearje, sille jo jo wizigingen automatysk sjen yn dizze loops.

Besjoch ús Sass-kaarten en loops -dokuminten foar hoe't jo dizze loops kinne oanpasse en de oanpak fan Bootstrap's basismodifier útwreidzje nei jo eigen koade.

Modifiers

In protte fan Bootstrap's komponinten binne boud mei in base-modifier klasse oanpak. Dit betsjut dat it grutste part fan 'e styling is befette yn in basisklasse (bgl. .btn) wylst stylfariaasjes beheind binne ta modifierklassen (bgl. .btn-danger). Dizze modifier-klassen binne boud fan 'e $theme-colorskaart om it oantal en de namme fan ús modifier-klassen oan te passen.

Hjir binne twa foarbylden fan hoe't wy loop oer de $theme-colorskaart te generearjen modifiers oan de .alerten .list-groupkomponinten.

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

Responsive

Dizze Sass-loops binne ek net beheind ta kleurkaarten. Jo kinne ek responsive fariaasjes fan jo komponinten generearje. Nim bygelyks ús responsive ôfstimming fan 'e dropdowns wêr't wy in @eachlus mingje foar de $grid-breakpointsSass-kaart mei in mediaquery ynklusyf.

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

As jo ​​​​jo wizigje $grid-breakpoints, sille jo wizigingen jilde foar alle loops dy't oer dy kaart iterearje.

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

Foar mear ynformaasje en foarbylden oer hoe't jo ús Sass-kaarten en fariabelen feroarje kinne, ferwize asjebleaft nei de Sass-seksje fan 'e Grid-dokumintaasje .

It meitsjen fan jo eigen

Wy moedigje jo oan om dizze rjochtlinen oan te nimmen by it bouwen mei Bootstrap om jo eigen komponinten te meitsjen. Wy hawwe dizze oanpak sels útwreide nei de oanpaste komponinten yn ús dokumintaasje en foarbylden. Komponinten lykas ús callouts binne boud krekt lykas ús levere komponinten mei basis- en modifierklassen.

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

Yn jo CSS soene jo wat hawwe lykas it folgjende wêr't it grutste part fan 'e styling wurdt dien fia .callout. Dan wurde de unike stilen tusken elke fariant regele fia modifier klasse.

// Base class
.callout {}

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

Foar de callouts is dy unike styling gewoan in border-left-color. As jo ​​​​dizze basisklasse kombinearje mei ien fan dy modifikaasjeklassen, krije jo jo folsleine komponintfamylje: