Componentes

Clases base

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

Para construir nuestras clases modificadoras, 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 responsivas para cada punto de interrupción. A medida que personalices estos mapas de Sass y recompiles, verás automáticamente tus cambios reflejados en estos bucles.

Consulta nuestra documentación sobre mapas y bucles de Sass para saber cómo personalizar estos bucles y extender el enfoque base-modificador de Bootstrap a tu propio código.

Modificadores

Muchos de los componentes de Bootstrap se construyen con un enfoque de clase base-modificador. Esto significa que la mayor parte del estilo está contenido en una clase base (por ejemplo, .btn), mientras que las variaciones de estilo se limitan a clases modificadoras (por ejemplo, .btn-danger). Estas clases modificadoras se construyen a partir del mapa $theme-colors para facilitar la personalización del número y el nombre de nuestras clases modificadoras.

Aquí hay dos ejemplos de cómo realizamos un bucle sobre el mapa $theme-colors para generar modificadores para los componentes .alert y .list-group.

// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

// 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 in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

Responsivo

Estos bucles de Sass tampoco se limitan a los mapas de colores. También puedes generar variaciones responsivas de tus componentes. Toma por ejemplo nuestra alineación responsiva de los menús desplegables donde mezclamos un bucle @each para el mapa Sass $grid-breakpoints con una inclusión de consulta de medios (media query).

// 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 iteran 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 de Sass, consulta la sección CSS de la documentación de la cuadrícula (Grid).

Creando el tuyo propio

Te recomendamos que adoptes estas pautas cuando construyas con Bootstrap para crear tus propios componentes. Nosotros mismos hemos extendido este enfoque a los componentes personalizados en nuestra documentación y ejemplos. Componentes como nuestras llamadas (callouts) se construyen de la misma manera que los componentes proporcionados 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 mediante clases modificadoras.

// Clase base
.callout {}

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

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