Ya que Bootstrap se desarrolló para ser móvil primero, usamos un puñado de consultas de 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 las vistas y nos permiten ampliar los elementos a medida que cambian las vistas.
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.
// 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) { … }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
Copy
// 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) { … }
// 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;
}
}
