Componentes

Clases base

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

Para construir nuestras clases de modificadores, usamos los bucles @each de Sass para iterar sobre un mapa de Sass. Esto es especialmente útil para generar variantes de un componente mediante nuestros $theme-colors y crear variantes responsive para cada breakpoint. A medida que personalizas estos mapas de Sass y los vuelves a compilar, verás automáticamente tus cambios reflejados en estos bucles.

Consulta nuestros documentos de mapas y bucles de Sass para saber cómo personalizar estos bucles y extender el enfoque modificador base de Bootstrap a tu propio código.

Modificadores

Muchos de los componentes de Bootstrap están construidos con un enfoque de clase de modificador 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 crean a partir del mapa $theme-colors para personalizar el número y el nombre de nuestras clases de modificadores.

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

Responsive

Estos bucles de Sass tampoco se limitan a mapas de colores. También puedes generar variaciones sensibles de tus componentes. Tomemos como ejemplo nuestra alineación responsive de los menús desplegables donde mezclamos un bucle @each para el mapa Sass $grid-breakpoints con una media query 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 modificas tus $grid-breakpoints, tus 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, consulta la sección Sass de la documentación de Grid.

Creando el tuyo propio

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

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

En tu CSS, tendrías 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 modificadora.

// Clase base
.callout {}

// Clases modificadoras
.callout-info {}
.callout-warning {}
.callout-danger {}

Para los callouts, ese estilo único es simplemente un border-left-color. Cuando combinas esa clase base con una de las clases modificadoras, obtienes tu familia de componentes completa: