Puntos de interrupción

Conceptos básicos

• Los puntos de interrupción son los componentes básicos del diseño responsive. Utilízalos para controlar cuándo se puede adaptar tu diseño a un viewport o tamaño de dispositivo en particular.

• Utiliza media queries para diseñar su CSS por punto de interrupción. Las media queries son una característica de CSS que te permite aplicar estilos condicionalmente según un conjunto de parámetros del navegador y del sistema operativo. Normalmente utilizamos min-width en nuestras media queries.

• El objetivo es el diseño responsive mobile-first. El CSS de Bootstrap tiene como objetivo aplicar el mínimo indispensable de estilos para hacer que un diseño funcione en el punto de interrupción más pequeño, y luego aplicar capas de estilos para ajustar ese diseño a tamaños de dispositivos más grandes. Esto optimiza tu CSS, mejora el tiempo de renderizado y brinda una excelente experiencia a tus visitantes.

Puntos de interrupción disponibles

Bootstrap incluye seis puntos de interrupción predeterminados, a veces denominados niveles de cuadrícula, para crear de manera responsive. Estos puntos de interrupción se pueden personalizar si utilizas nuestros archivos fuente Sass.

Cada punto de interrupción se eligió para contener cómodamente contenedores cuyos anchos son múltiplos de 12. Los puntos de interrupción también son representativos de un subconjunto de tamaños de dispositivos y dimensiones de viewports comunes; no se dirigen específicamente a cada caso de uso o dispositivo. En cambio, las gamas proporcionan una base sólida y consistente sobre la que construir para casi cualquier dispositivo.

Estos puntos de interrupción se pueden personalizar a través de Sass; los encontrarás en un mapa de Sass en nuestra hoja de estilo _variables.scss .

$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.

Media queries

Dado que Bootstrap está desarrollado para ser mobile-first, usamos un puñado de media queries para crear puntos de interrupción sensibles para nuestros diseños e interfaces. Estos puntos de interrupción se basan principalmente en anchos mínimos del viewport y nos permiten ampliar los elementos a medida que cambia el viewport.

Min-width

Bootstrap utiliza principalmente los siguientes rangos de media query (o puntos de interrupción) en nuestros archivos Sass fuente para nuestro diseño, sistema de cuadrícula y componentes.

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Estos mixins de Sass se traducen en nuestro CSS compilado usando los valores declarados en nuestras variables de Sass. Por ejemplo:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-width

Ocasionalmente usamos media queries que van en la otra dirección (el tamaño de pantalla dado o menor):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Estos mixins toman esos puntos de interrupción declarados, les restan .02px y los usan como nuestros valores de max-width. Por ejemplo:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Punto de interrupción único

También existen media queries y mixins para apuntar a un solo segmento de tamaños de pantalla utilizando los anchos de punto de interrupción mínimo y máximo.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

Por ejemplo, @include media-breakpoint-only(md) { ... } dará como resultado:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Entre puntos de interrupción

De manera similar, las media queries pueden abarcar múltiples anchos de puntos de interrupción:

@include media-breakpoint-between(md, xl) { ... }

Lo cual resulta en:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }