Componentes

Clases base

Los componentes de Bootstrap están construidos 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-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 nuestro $theme-colors y crear variantes responsive para cada punto de interrupción. A medida que personalices estos mapas de Sass y los vuelvas a compilar, verás automáticamente tus cambios reflejados en estos bucles.

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

Modificadores

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

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

Responsive

Estos bucles de Sass tampoco se limitan a mapas de colores. También puedes generar variaciones responsive de tus componentes. Tomemos, por 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 include.

// 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 se 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 de Sass, consulta la sección CSS de la documentación de Grid.

Crear el tuyo propio

Te animamos a que adoptes estas pautas cuando construyas 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 igual 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 una clase modificadora.

// Base class
.callout {}

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

Para las leyendas, 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: