Puntos de ruptura

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-widthnas nosas consultas de medios.

• En primeiro lugar, o deseño responsive é o móbil. 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.

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.scssfolla 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 .02pxe utilízanos como os nosos max-widthvalores. 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) { ... }

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) { ... }