Componentes

Clases base

Los componentes de Bootstrap se construyen en gran medida con una nomenclatura de modificador de base. Agrupamos tantas propiedades compartidas como sea posible en una clase base, como .btn, y luego agrupamos estilos individuales para cada variante en clases modificadoras, como .btn-primaryo .btn-success.

Para construir nuestras clases de modificadores, usamos los @eachbucles de Sass para iterar sobre un mapa de Sass. Esto es especialmente útil para generar variantes de un componente $theme-colorsy crear variantes de respuesta para cada punto de interrupción. A medida que personaliza estos mapas de Sass y los vuelve a compilar, verá automáticamente sus cambios reflejados en estos bucles.

Consulte nuestros documentos de mapas y bucles de Sass para saber cómo personalizar estos bucles y ampliar el enfoque modificador base de Bootstrap a su propio código.

Modificadores

Muchos de los componentes de Bootstrap están construidos con un enfoque de clase de modificador de base. Esto significa que la mayor parte del estilo está contenido en una clase base (p. ej., .btn) mientras que las variaciones de estilo se limitan a las clases de modificadores (p. ej., .btn-danger). Estas clases de modificadores se construyen a partir del $theme-colorsmapa para personalizar el número y el nombre de nuestras clases de modificadores.

Aquí hay dos ejemplos de cómo recorremos el $theme-colorsmapa para generar modificadores para los componentes .alerty ..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);
}

Sensible

Estos bucles de Sass tampoco se limitan a mapas de colores. También puede generar variaciones sensibles de sus componentes. Tomemos, por ejemplo, nuestra alineación receptiva de los menús desplegables donde mezclamos un @eachbucle para el $grid-breakpointsmapa de Sass con una consulta de medios incluida.

// 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 modifica su $grid-breakpoints, sus cambios se aplicarán a todos los bucles que iteren sobre ese mapa.

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

Para obtener más información y ejemplos sobre cómo modificar nuestros mapas y variables Sass, consulte la sección Sass de la documentación de Grid .

Creando el tuyo propio

Lo alentamos a que adopte estas pautas cuando construya con Bootstrap para crear sus propios componentes. Nosotros mismos hemos ampliado este enfoque a los componentes personalizados en nuestra documentación y ejemplos. Los componentes como nuestras llamadas se construyen al igual que nuestros componentes provistos con clases base y modificadoras.

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

En su CSS, tendría algo como lo siguiente, donde la mayor parte del estilo se realiza a través de .callout. Luego, los estilos únicos entre cada variante se controlan a través de la clase de modificador.

// Base class
.callout {}

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

Para las llamadas, ese estilo único es solo un archivo border-left-color. Cuando combina esa clase base con una de esas clases modificadoras, obtiene su familia de componentes completa: