Bootstrap breakpoints: Breakpoints · Bootstrap v5.0

Отзывчивый

Адаптивные контейнеры появились в Bootstrap v4.4. Они позволяют указать класс шириной 100 %, пока не будет достигнута указанная точка останова, после чего мы применяем max-width для каждой из более высоких точек останова. Например, .container-sm имеет ширину 100% в начале, пока не будет достигнута точка останова sm , где он будет масштабироваться до md , lg и xl .

 
Ширина 100% до маленькой точки останова
Ширина 100 % до средней точки останова
Ширина 100% до большой точки останова
Ширина 100 % до очень большой точки останова
 

Реагирующие точки останова

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

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

 // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
// Нет медиа-запроса для `xs`, так как это значение по умолчанию в Bootstrap
// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (минимальная ширина: 576 пикселей) { ... }
// Средние устройства (планшеты, 768px и выше)
@media (минимальная ширина: 768 пикселей) { ... }
// Большие устройства (десктопы, 992px и выше)
@media (минимальная ширина: 992px) { ... }
// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (минимальная ширина: 1200 пикселей) { ... }
 

Поскольку мы пишем наш исходный CSS на Sass, все наши медиа-запросы доступны через миксины 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) { . .. }
// Пример: скрыть, начиная с `min-width: 0`, а затем показать в точке останова `sm`
.пользовательский класс {
  дисплей: нет;
}
@include media-breakpoint-up(sm) {
  .пользовательский класс {
    дисплей: блок;
  }
}
 

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

 // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575,98 пикселей) { ... }
// Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (максимальная ширина: 767,98 пикселей) { ... }
// Средние устройства (планшеты, менее 992 пикселей)
@media (максимальная ширина: 991,98 пикселей) { ... }
// Большие устройства (рабочие столы, менее 1200 пикселей)
@media (максимальная ширина: 1199,98 пикселей) { ... }
// Очень большие устройства (большие рабочие столы)
// Нет медиа-запроса, так как очень большая точка останова не имеет верхней границы ширины
 

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

Опять же, эти медиа-запросы также доступны через миксины Sass:

 @include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// Нет необходимости в медиа-запросе для точки останова xl, поскольку у нее нет верхней границы ширины
// Пример: Стиль от средней точки останова и вниз
@include media-breakpoint-down(md) {
  .пользовательский класс {
    дисплей: блок;
  }
}
 

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

 // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575,98 пикселей) { ... }
// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (минимальная ширина: 576 пикселей) и (максимальная ширина: 767,98 пикселей) { . .. }
// Средние устройства (планшеты, 768px и выше)
@media (минимальная ширина: 768 пикселей) и (максимальная ширина: 991,98 пикселей) { ... }
// Большие устройства (десктопы, 992px и выше)
@media (минимальная ширина: 992 пикселя) и (максимальная ширина: 1199,98 пикселя) { ... }
// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (минимальная ширина: 1200 пикселей) { ... }
 

Эти медиа-запросы также доступны через миксины Sass:

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

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

 // Пример
// Применяем стили, начиная со средних устройств и заканчивая очень большими устройствами
@media (минимальная ширина: 768 пикселей) и (максимальная ширина: 1199,98 пикселей) { . .. }
 

Миксин Sass для таргетинга на тот же диапазон размеров экрана:

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

Z-индекс

Несколько компонентов Bootstrap используют z-index , свойство CSS, которое помогает управлять макетом, предоставляя третью ось для упорядочения содержимого. Мы используем шкалу z-индекса по умолчанию в Bootstrap, которая была разработана для правильной навигации по слоям, всплывающих подсказок и всплывающих окон, модальных окон и многого другого.

Эти более высокие значения начинаются с произвольного числа, высокого и достаточно определенного, чтобы в идеале избежать конфликтов. Нам нужен их стандартный набор для наших многоуровневых компонентов — всплывающие подсказки, всплывающие окна, панели навигации, раскрывающиеся списки, модальные окна — чтобы мы могли быть достаточно последовательными в поведении. Нет никаких причин, по которым мы не могли бы использовать 100 + или 500 +.

Мы не поощряем настройку этих отдельных значений; если вы измените один, вам, вероятно, придется изменить их все.

 $zindex-раскрывающийся список: 1000 !по умолчанию;
$zindex-sticky: 1020 !по умолчанию;
$zindex-fixed: 1030 !по умолчанию;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !по умолчанию;
$zindex-popover: 1060 !по умолчанию;
$zindex-tooltip: 1070 !по умолчанию;