Los puntos de interrupción son anchos personalizables que determinan cómo se comporta su diseño receptivo en todos los tamaños de dispositivos o vistas en Bootstrap.

Conceptos básicos

  • Los puntos de interrupción son los componentes básicos del diseño receptivo. Úselos para controlar cuándo se puede adaptar su diseño a una ventana gráfica o tamaño de dispositivo en particular.

  • Utilice consultas de medios para diseñar su CSS por punto de interrupción. Las consultas de medios son una función de CSS que le permite aplicar estilos de forma condicional en función de un conjunto de parámetros del navegador y del sistema operativo. Usamos más comúnmente min-width en nuestras consultas de medios.

  • El objetivo es el diseño receptivo y móvil primero. El CSS de Bootstrap tiene como objetivo aplicar el mínimo de estilos para hacer que un diseño funcione en el punto de interrupción más pequeño, y luego capas en los estilos para ajustar ese diseño para dispositivos más grandes. Esto optimiza su CSS, mejora el tiempo de renderizado y brinda una gran experiencia a sus visitantes.

Puntos de interrupción disponibles

Bootstrap incluye seis puntos de interrupción predeterminados, a veces denominados niveles de cuadrícula, para construir de manera receptiva. Estos puntos de interrupción se pueden personalizar si está utilizando nuestros archivos Sass de origen.

Breakpoint Infijo de clase Dimensiones
X-pequeño Ninguno <576 px
Pequeña sm ≥576px
Medio md ≥768px
Grande lg ≥992px
Extra grande xl ≥1200px
Extra extra grande xxl ≥1400px

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 comunes y dimensiones de ventana gráfica; no se dirigen específicamente a cada caso de uso o dispositivo. En cambio, los rangos brindan una base sólida y consistente sobre la cual construir para casi cualquier dispositivo.

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

$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, consulte la sección Sass de la documentación de Grid.

Preguntas de los medios

Dado que Bootstrap está desarrollado para ser móvil primero, usamos un puñado de preguntas de los medios para crear puntos de interrupción sensibles para nuestros diseños e interfaces. Estos puntos de interrupción se basan principalmente en los anchos mínimos de la ventana y nos permiten escalar los elementos a medida que cambia la ventana.

Ancho mínimo

Bootstrap utiliza principalmente los siguientes rangos de consulta de medios (o puntos de interrupción) en nuestros archivos Sass de origen 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)  ... `@includemedia-breakpoint-up(sm) ... @includemedia-breakpoint-up(md) ... @includemedia-breakpoint-up(lg) ... @includemedia-breakpoint-up(xl) ... @includemedia-breakpoint-up(xxl) ... // Usage// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint.custom-class display: none;@includemedia-breakpoint-up(sm).custom-class display: block;

Estos mixins de Sass se traducen en nuestro CSS compilado utilizando 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) ...

Anchura máxima

Ocasionalmente usamos consultas de medios 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)  ... `@includemedia-breakpoint-down(sm) ... @includemedia-breakpoint-down(md) ... @includemedia-breakpoint-down(lg) ... @includemedia-breakpoint-down(xl) ... @includemedia-breakpoint-down(xxl) ... // Example: Style from medium breakpoint and down@includemedia-breakpoint-down(md).custom-class display: block;

Estos mixins toman esos puntos de corte declarados, restan .02px de ellos, y utilícelos como nuestro max-width valores. Por ejemplo:

// X-Small devices (portrait phones, less than 576px)@media(max-width: 575.98px) ... // Small devices (landscape phones, less than 768px)@media(max-width: 767.98px) ... // Medium devices (tablets, less than 992px)@media(max-width: 991.98px) ... // Large devices (desktops, less than 1200px)@media(max-width: 1199.98px) ... // X-Large devices (large desktops, less than 1400px)@media(max-width: 1399.98px) ... // XX-Large devices (larger desktops)// No media query since the xxl breakpoint has no upper bound on its width

¿Por qué restar .02px? Actualmente, los navegadores no admiten consultas de contexto de rango, por lo que solucionamos las limitaciones de min- y max- prefijos y ventanas de visualización con anchos fraccionarios (que pueden ocurrir bajo ciertas condiciones en dispositivos de alta ppp, por ejemplo) mediante el uso de valores con mayor precisión.

Punto de interrupción único

También hay consultas de medios 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.

@includemedia-breakpoint-only(xs) ... @includemedia-breakpoint-only(sm) ... @includemedia-breakpoint-only(md) ... @includemedia-breakpoint-only(lg) ... @includemedia-breakpoint-only(xl) ... @includemedia-breakpoint-only(xxl) ...

Por ejemplo el @include media-breakpoint-only(md) ... resultará en :

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

Entre puntos de ruptura

Del mismo modo, las consultas de medios pueden abarcar varios anchos de puntos de interrupción:

@includemedia-breakpoint-between(md, xl) ...

Lo que resulta en:

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