Pontos de interrupção

Conceitos principais

• Pontos de interrupção são os blocos de construção do design responsivo. Use-os para controlar quando seu layout pode ser adaptado em uma determinada viewport ou tamanho de dispositivo.

• Use consultas de mídia para arquitetar seu CSS por ponto de interrupção. As consultas de mídia são um recurso do CSS que permite aplicar estilos condicionalmente com base em um conjunto de parâmetros do navegador e do sistema operacional. Usamos mais comumente min-widthem nossas consultas de mídia.

• Mobile first, design responsivo é o objetivo. O CSS do Bootstrap visa aplicar o mínimo de estilos para fazer um layout funcionar no menor ponto de interrupção e, em seguida, sobrepor estilos para ajustar esse design para dispositivos maiores. Isso otimiza seu CSS, melhora o tempo de renderização e oferece uma ótima experiência para seus visitantes.

Pontos de interrupção disponíveis

O Bootstrap inclui seis pontos de interrupção padrão, às vezes chamados de camadas de grade , para construção responsiva. Esses pontos de interrupção podem ser personalizados se você estiver usando nossos arquivos Sass de origem.

Cada ponto de interrupção foi escolhido para conter confortavelmente contêineres cujas larguras são múltiplos de 12. Os pontos de interrupção também são representativos de um subconjunto de tamanhos de dispositivos comuns e dimensões de janelas de visualização — eles não visam especificamente todos os casos de uso ou dispositivos. Em vez disso, os intervalos fornecem uma base sólida e consistente para praticamente qualquer dispositivo.

Esses pontos de interrupção são personalizáveis ​​via Sass—você os encontrará em um mapa Sass em nossa _variables.scssfolha de estilo.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Para obter mais informações e exemplos sobre como modificar nossos mapas e variáveis ​​Sass, consulte a seção Sass da documentação do Grid .

Consultas de mídia

Como o Bootstrap foi desenvolvido para ser móvel primeiro, usamos um punhado de consultas de mídia para criar pontos de interrupção sensatos para nossos layouts e interfaces. Esses pontos de interrupção são baseados principalmente nas larguras mínimas da janela de visualização e nos permitem aumentar a escala dos elementos à medida que a janela de visualização muda.

Largura mínima

O Bootstrap usa principalmente os seguintes intervalos de consulta de mídia - ou pontos de interrupção - em nossos arquivos Sass de origem para nosso layout, sistema de grade e 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;
  }
}

Esses mixins Sass traduzem em nosso CSS compilado usando os valores declarados em nossas variáveis ​​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) { ... }

Largura máxima

Ocasionalmente, usamos consultas de mídia que vão na outra direção (o tamanho de tela fornecido ou 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;
  }
}

Esses mixins pegam esses pontos de interrupção declarados, subtraem .02pxdeles e os usam como nossos 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) { ... }

Ponto de interrupção único

Há também consultas de mídia e mixins para segmentar um único segmento de tamanhos de tela usando as larguras mínima e máxima do ponto de interrupção.

@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 resultará em:

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

Entre pontos de interrupção

Da mesma forma, as consultas de mídia podem abranger várias larguras de ponto de interrupção:

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

O que resulta em:

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