Components

Classes base

Els components de Bootstrap es construeixen en gran part amb una nomenclatura de modificador de bases. Agrupem tantes propietats compartides com sigui possible en una classe base, com ara .btn, i després agrupem estils individuals per a cada variant en classes modificadores, com .btn-primaryo .btn-success.

Per crear les nostres classes modificadores, utilitzem els @eachbucles de Sass per iterar sobre un mapa de Sass. Això és especialment útil per generar variants d'un component pel nostre $theme-colorsi crear variants sensibles per a cada punt d'interrupció. A mesura que personalitzeu aquests mapes Sass i recompileu, veureu automàticament els vostres canvis reflectits en aquests bucles.

Consulteu els nostres mapes i documents de bucles de Sass per saber com personalitzar aquests bucles i ampliar l'enfocament del modificador bàsic de Bootstrap al vostre propi codi.

Modificadors

Molts dels components de Bootstrap es construeixen amb un enfocament de classe de modificador de base. Això significa que la major part de l'estil està continguda a una classe base (p. ex., .btn) mentre que les variacions d'estil es limiten a classes modificadores (p. ex., .btn-danger). Aquestes classes modificadores es construeixen a partir del $theme-colorsmapa per personalitzar el nombre i el nom de les nostres classes modificadores.

Aquí hi ha dos exemples de com fem un bucle sobre el $theme-colorsmapa per generar modificadors als components .alerti ..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);
}

Responent

Aquests bucles Sass tampoc es limiten als mapes de colors. També podeu generar variacions sensibles dels vostres components. Prengui per exemple la nostra alineació sensible dels menús desplegables on barregem un @eachbucle per al $grid-breakpointsmapa Sass amb una consulta multimèdia inclosa.

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

Si modifiqueu el vostre $grid-breakpoints, els vostres canvis s'aplicaran a tots els bucles que iterin sobre aquest mapa.

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

Per obtenir més informació i exemples sobre com modificar els nostres mapes i variables Sass, consulteu la secció Sass de la documentació de Grid .

Creant el teu propi

Us animem a adoptar aquestes directrius quan creeu amb Bootstrap per crear els vostres propis components. Hem estès aquest enfocament als components personalitzats de la nostra documentació i exemples. Components com els nostres texts destacats es creen igual que els nostres components proporcionats amb classes base i modificadora.

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

Al vostre CSS, tindríeu alguna cosa com el següent on la major part de l'estil es fa mitjançant .callout. Aleshores, els estils únics entre cada variant es controlen mitjançant la classe modificadora.

// Base class
.callout {}

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

Per als texts destacats, aquest estil únic és només un border-left-color. Quan combineu aquesta classe base amb una d'aquestes classes modificadores, obtindreu la vostra família de components completa: