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

Основные концепции

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

• Используйте медиа-запросы для создания архитектуры 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 для нашего макета, системы сетки и компонентов.

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

// Медиа-запрос не нужен для 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 устройства (портретные телефоны, меньше 576px)
// Никакого медиа-запроса для `xs`, поскольку это значение по умолчанию в Bootstrap

// Маленькие устройства (альбомные телефоны, 576px и выше)
@media (min-width: 576px) { ... }

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

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

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

// XX-Large устройства (большие настольные компьютеры, 1400px и выше)
@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 устройствам (портретные телефоны, меньше 576px)
@media (max-width: 575.98px) { ... }

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

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

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

// `xxl` применяется к x-large устройствам (большие настольные компьютеры, меньше 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) { ... }

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

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