Перейти к основному содержанию

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

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

Содержание

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

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

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

Точка останова Инфикс класса Размеры
X-маленький Никто 0–576 пикселей
Маленький sm ≥576 пикселей
средний md ≥768 пикселей
Большой lg ≥992 пикселей
Очень большой xl ≥1200 пикселей
Очень очень большой xxl ≥1400 пикселей

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

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

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

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

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

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

Min-width

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

Max-width

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

// 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 значений. Например:

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {  ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {  ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) {  ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {  ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) {  ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
Зачем вычитать 0,02 пикселя? В настоящее время браузеры не поддерживают запросы контекста диапазона , поэтому мы обходим ограничения 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) {  ... }

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

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