Componente

Clasele de bază

Componentele Bootstrap sunt în mare parte construite cu o nomenclatură de modificare de bază. Grupăm cât mai multe proprietăți partajate într-o clasă de bază, cum ar fi .btn, și apoi grupăm stilurile individuale pentru fiecare variantă în clase modificatoare, cum ar fi .btn-primarysau .btn-success.

Pentru a construi clasele noastre modificatoare, folosim @eachbuclele lui Sass pentru a itera peste o hartă Sass. Acest lucru este util în special pentru a genera variante ale unei componente de către noi $theme-colorsși pentru a crea variante receptive pentru fiecare punct de întrerupere. Pe măsură ce personalizați aceste hărți Sass și recompilați, veți vedea automat modificările reflectate în aceste bucle.

Consultați documentele noastre privind hărțile și buclele Sass pentru a afla cum să personalizați aceste bucle și să extindeți abordarea de modificare de bază a Bootstrap la propriul cod.

Modificatori

Multe dintre componentele lui Bootstrap sunt construite cu o abordare a clasei modificatoare de bază. Aceasta înseamnă că cea mai mare parte a stilului este conținută într-o clasă de bază (de exemplu, .btn), în timp ce variațiile de stil sunt limitate la clasele modificatoare (de exemplu, .btn-danger). Aceste clase modificatoare sunt construite din $theme-colorshartă pentru a personaliza numărul și numele claselor noastre modificatoare.

Iată două exemple de modul în care trecem peste $theme-colorshartă pentru a genera modificatori pentru componentele .alertși .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);
}

Receptiv

Aceste bucle Sass nu se limitează nici la hărți de culori. De asemenea, puteți genera variații receptive ale componentelor dvs. Luați, de exemplu, alinierea noastră receptivă a meniurilor derulante în care amestecăm o @eachbuclă pentru $grid-breakpointsharta Sass cu o interogare media.

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

Dacă modificați $grid-breakpoints, modificările dvs. se vor aplica tuturor buclelor care iterează pe harta respectivă.

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

Pentru mai multe informații și exemple despre cum să modificați hărțile și variabilele noastre Sass, vă rugăm să consultați secțiunea Sass din documentația Grid .

Crearea propriei dvs

Vă încurajăm să adoptați aceste reguli atunci când construiți cu Bootstrap pentru a vă crea propriile componente. Am extins această abordare la componentele personalizate din documentația și exemplele noastre. Componentele precum înștiințările noastre sunt construite la fel ca componentele noastre furnizate cu clase de bază și modificatoare.

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

În CSS-ul dvs., veți avea ceva de genul următor, unde cea mai mare parte a stilului este realizată prin .callout. Apoi, stilurile unice dintre fiecare variantă sunt controlate prin intermediul clasei modificatoare.

// Base class
.callout {}

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

Pentru înștiințări, acel stil unic este doar un border-left-color. Când combinați acea clasă de bază cu una dintre acele clase de modificatori, obțineți familia dvs. completă de componente: