Componenti

Classi base

I componenti di Bootstrap sono in gran parte costruiti con una nomenclatura di modifica di base. Raggruppiamo il maggior numero possibile di proprietà condivise in una classe base, come .btn, e quindi raggruppiamo i singoli stili per ciascuna variante in classi di modificatori, come .btn-primaryo .btn-success.

Per costruire le nostre classi di modificatori, utilizziamo i @eachcicli di Sass per eseguire l'iterazione su una mappa di Sass. Ciò è particolarmente utile per generare varianti di un componente tramite il nostro $theme-colorse creare varianti reattive per ogni punto di interruzione. Man mano che personalizzi queste mappe Sass e le ricompili, vedrai automaticamente le tue modifiche riflesse in questi loop.

Dai un'occhiata alle nostre mappe Sass e ai documenti sui loop per come personalizzare questi loop ed estendere l'approccio del modificatore di base di Bootstrap al tuo codice.

Modificatori

Molti dei componenti di Bootstrap sono costruiti con un approccio di classe con modificatore di base. Ciò significa che la maggior parte dello stile è contenuta in una classe base (ad esempio, .btn) mentre le variazioni di stile sono limitate alle classi modificatori (ad esempio, .btn-danger). Queste classi di modificatori sono costruite dalla $theme-colorsmappa per personalizzare il numero e il nome delle nostre classi di modificatori.

Ecco due esempi di come si scorre la $theme-colorsmappa per generare modificatori ai componenti .alerte .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);
}

reattivo

Anche questi loop Sass non si limitano alle mappe dei colori. Puoi anche generare variazioni reattive dei tuoi componenti. Prendi ad esempio il nostro allineamento reattivo dei menu a discesa in cui mescoliamo un @eachciclo per la $grid-breakpointsmappa Sass con una query multimediale inclusa.

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

Se modifichi il tuo $grid-breakpoints, le tue modifiche si applicheranno a tutti i loop che ripetono su quella mappa.

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

Per ulteriori informazioni ed esempi su come modificare le nostre mappe e variabili Sass, fare riferimento alla sezione Sass della documentazione Grid .

Creando il tuo

Ti invitiamo ad adottare queste linee guida durante la creazione con Bootstrap per creare i tuoi componenti. Abbiamo esteso questo approccio noi stessi ai componenti personalizzati nella nostra documentazione ed esempi. I componenti come i nostri callout sono costruiti proprio come i nostri componenti forniti con classi di base e modificatori.

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

Nel tuo CSS, avresti qualcosa di simile al seguente in cui la maggior parte dello stile viene eseguita tramite .callout. Quindi, gli stili univoci tra ciascuna variante sono controllati tramite la classe del modificatore.

// Base class
.callout {}

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

Per i callout, quello stile unico è solo un border-left-color. Quando combini quella classe base con una di quelle classi di modifica, ottieni la tua famiglia di componenti completa: