Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

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

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

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

  • Контрольные точки являются строительными блоками адаптивного дизайна. Используйте их по контролю макет для адаптиции под конкретный видовой экран или размер устройства.

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

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

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

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

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

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

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

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

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

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

Поскольку 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. Например:

// Устройства X-Small (портретные телефоны, менее 576 пикселей)
@media (max-width: 575.98px) { ... }

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

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

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

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

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

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

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

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