Точки разрыва

Основные понятия

• Точки разрыва — это строительные блоки адаптивного дизайна. Используйте их, чтобы контролировать, когда ваш макет можно адаптировать к определенному размеру экрана или устройству.

• Используйте медиазапросы для разработки вашей CSS по точкам разрыва. Медиазапросы — это функция CSS, которая позволяет вам условно применять стили на основе набора параметров браузера и операционной системы. Мы чаще всего используем min-width в наших медиазапросах.

• Мобильная первая, адаптивный дизайн — это цель. CSS Bootstrap стремится применять минимальное количество стилей, чтобы макет работал на самой маленькой точке разрыва, а затем накладывает стили для настройки этого дизайна для более крупных устройств. Это оптимизирует вашу CSS, улучшает время рендеринга и обеспечивает отличный опыт для ваших посетителей.

Доступные точки разрыва

Bootstrap включает шесть стандартных точек разрыва, иногда называемых уровнями сетки, для создания адаптивного дизайна. Эти точки разрыва можно настроить, если вы используете наши исходные файлы Sass.

Каждая точка разрыва была выбрана для удобного размещения контейнеров, ширина которых является кратной 12. Точки разрыва также представляют подмножество распространенных размеров устройств и размеров экрана — они не нацелены на каждый случай использования или устройство. Вместо этого диапазоны предоставляют прочную и последовательную основу для построения практически для любого устройства.

Эти точки разрыва можно настраивать через Sass — вы найдете их в Sass-карте в нашем _variables.scss стиле.

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

Для получения дополнительной информации и примеров по тому, как изменить наши Sass-карты и переменные, обратитесь к разделу CSS документации по сетке.

Медиазапросы

Поскольку Bootstrap разработан с мобильной ориентацией первой, мы используем несколько медиазапросов, чтобы создать осмысленные точки разрыва для наших макетов и интерфейсов. Эти точки разрыва в основном основаны на минимальной ширине экрана и позволяют масштабировать элементы по мере изменения размера экрана.

Минимальная ширина

Bootstrap в основном использует следующие диапазоны медиазапросов — или точки разрыва — в наших исходных Sass-файлах для макета, системы сетки и компонентов.

// 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;
  }
}

Эти Sass-микшины переводятся в скомпилированную CSS с использованием значений, объявленных в наших Sass-переменных. Например:

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

Максимальная ширина

Иногда мы используем медиазапросы, которые направлены в противоположном направлении (указанный размер экрана или меньше):

// 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;
  }
}

Эти микшины берут указанные точки разрыва, вычитают .02px из них и используют их как значения max-width. Например:

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

Единая точка разрыва

Также существуют медиазапросы и микшины для выбора одного сегмента размеров экрана, используя минимальную и максимальную ширину точки разрыва.

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

Например, @include media-breakpoint-only(md) { ... } приведет к:

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

Между точками разрыва

Аналогично, медиазапросы могут охватывать несколько точек разрыва:

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

Что приводит к:

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