Cмотреть на GitHub

Контрольные точки

Контрольные точки (Breakpoints) - это триггеры настраиваемой ширины, которые определяют поведение адаптивного макета Bootstrap в зависимости от размеров устройства или области просмотра.

На этой странице

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

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

Доступные контрольные точки

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

Контрольные точки	Инфикс класса	Размеры
X-Small	Нет	<576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px

Размер каждой контрольной точки был выбран кратным 12 и представляющим подмножество общих размеров устройства и размеров области просмотра. Они не предназначены специально для каждого варианта использования или устройства, но диапазоны обеспечения обеспечивают прочную и последовательную основу для создания практически любого устройства.

Эти контрольные точки настраиваются через Sass - Вы найдете их на карте Sass в нашей таблице стилей _variables.scss.

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

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

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

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

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

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

// Исходные миксины

// Нет необходимости в медиа-запросе для контрольной точки xs, так как это эффективно `@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) { ... }

// Применение

// Пример: Скрыть начало с `min-width: 0`, а затем показать в контрольной точке `sm`
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

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

// Устройства X-Small (портретные телефоны, менее 576 пикселей)
// Нет медиа-запроса для `xs`, так как это значение по умолчанию в Bootstrap

// Устройства Small (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) { ... }

// Устройства Medium (планшеты, 768 пикселей и выше)
@media (min-width: 768px) { ... }

// Устройства Large (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) { ... }

// Устройства X-Large (большие настольные компьютеры, 1200 пикселей и выше)
@media (min-width: 1200px) { ... }

// Устройства XX-Large (большие настольные компьютеры, 1400 пикселей и выше)
@media (min-width: 1400px) { ... }

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

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

// Для контрольной точки xs не требуется медиа-запрос, поскольку он фактически `@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) { ... }

// Пример: стиль от средней контрольной точки и ниже
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

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

// `xs` возвращает только набор правил, но не медиа-запрос
// ... { ... }

// `sm` применяется к устройствам x-small (портретные телефоны, менее 576 пикселей)
@media (max-width: 575.98px) { ... }

// `md` применяется к небольшим устройствам medium (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (max-width: 767.98px) { ... }

// `lg` применяется к устройствам среднего размера large (планшеты, менее 992 пикселей)
@media (max-width: 991.98px) { ... }

// `xl` применяется к большим устройствам (настольные компьютеры, менее 1200 пикселей)
@media (max-width: 1199.98px) { ... }

// `xxl` применяется к устройствам x-large (большие рабочие столы, менее 1400 пикселей)
@media (max-width: 1399.98px) { ... }

Зачем вычитать .02px? В настоящее время браузеры не поддерживают контекстные запросы диапазона, поэтому мы обходим ограничения префиксы min- и max- и области просмотра с дробной шириной (что может происходить при определенных условиях на высоких -dpi устройства, например), используя значения с более высокой точностью.

Одиночная контрольная точка

Существуют также медиа-запросы и миксины для нацеливания на один сегмент размеров экрана с использованием минимальной и максимальной ширины контрольной точки.

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

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

// Пример
// Применятся стили, начиная со средних и заканчивая очень большими.
@media (min-width: 768px) and (max-width: 1199.98px) { ... }