Puntos de ruptura
Os puntos de interrupción son anchos personalizables que determinan como se comporta o teu deseño de resposta nos tamaños do dispositivo ou das vistas en Bootstrap.
Conceptos básicos
-
Os puntos de interrupción son os bloques de construción do deseño receptivo. Utilízaos para controlar cando se pode adaptar o teu deseño a un determinado tamaño de visualización ou dispositivo.
-
Use consultas multimedia para diseñar o seu CSS por punto de interrupción. As consultas multimedia son unha característica de CSS que permite aplicar condicionalmente estilos baseados nun conxunto de parámetros do navegador e do sistema operativo. Utilizamos máis habitualmente
min-width
nas nosas consultas de medios. -
Primeiro para móbiles, o deseño responsive é o obxectivo. O CSS de Bootstrap ten como obxectivo aplicar o mínimo de estilos para facer que un deseño funcione no punto de interrupción máis pequeno e, a continuación, crear capas de estilos para axustar ese deseño a dispositivos máis grandes. Isto optimiza o teu CSS, mellora o tempo de renderizado e ofrece unha excelente experiencia para os teus visitantes.
Puntos de interrupción dispoñibles
Bootstrap inclúe seis puntos de interrupción predeterminados, ás veces denominados niveis de cuadrícula , para construír de forma sensible. Estes puntos de interrupción pódense personalizar se estás a usar os nosos ficheiros de orixe Sass.
Punto de ruptura | Infixo de clase | Dimensións |
---|---|---|
X-Pequeno | Ningún | <576 píxeles |
Pequena | sm |
≥576 píxeles |
Medio | md |
≥768 píxeles |
Grande | lg |
≥992 píxeles |
Extra grande | xl |
≥1200 píxeles |
Extra grande | xxl |
≥1400 píxeles |
Cada punto de interrupción escolleuse para albergar comodamente os contedores cuxos anchos son múltiplos de 12. Os puntos de interrupción tamén son representativos dun subconxunto de tamaños de dispositivos comúns e dimensións de visualización; non teñen como obxectivo específico todos os casos de uso ou dispositivos. Pola contra, os rangos proporcionan unha base sólida e consistente para construír case calquera dispositivo.
Estes puntos de interrupción son personalizables a través de Sass; atoparaos nun mapa de Sass na nosa _variables.scss
folla de estilo.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Para obter máis información e exemplos sobre como modificar os nosos mapas e variables Sass, consulte a sección Sass da documentación de Grid .
Consultas de medios
Dado que Bootstrap está desenvolvido para ser móbil primeiro, usamos un puñado de consultas multimedia para crear puntos de interrupción sensatos para os nosos deseños e interfaces. Estes puntos de interrupción baséanse na súa maioría en anchos mínimos de vistas e permítennos ampliar os elementos a medida que cambia a vista.
Ancho mínimo
Bootstrap usa principalmente os seguintes intervalos de consulta multimedia (ou puntos de interrupción) nos nosos ficheiros de orixe Sass para o noso deseño, sistema de cuadrícula e compoñentes.
// 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;
}
}
Estes mixins Sass tradúcense no noso CSS compilado usando os valores declarados nas nosas variables Sass. Por exemplo:
// 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) { ... }
Ancho máximo
Ocasionalmente usamos consultas multimedia que van na outra dirección (o tamaño da pantalla ou máis pequeno ):
// 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;
}
}
Estes mixins toman eses puntos de interrupción declarados, réstanlles .02px
e utilízanos como os nosos max-width
valores. Por exemplo:
// `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) { ... }
min-
e os max-
prefixos e as ventás gráficas con anchos fraccionarios (que poden ocorrer en determinadas condicións en dispositivos de alta ppp, por exemplo) utilizando valores con maior precisión.
Punto de interrupción único
Tamén hai consultas multimedia e mixins para orientar un único segmento de tamaños de pantalla utilizando os anchos de punto de interrupción mínimo e 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 exemplo, o @include media-breakpoint-only(md) { ... }
resultado será:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
Entre puntos de interrupción
Do mesmo xeito, as consultas multimedia poden abarcar varios puntos de interrupción:
@include media-breakpoint-between(md, xl) { ... }
O 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) { ... }