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

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

Точки останова — это настраиваемая ширина, которая определяет, как ваш адаптивный макет ведет себя на разных устройствах или размерах области просмотра в Bootstrap.

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

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

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

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

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

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

Точка останова Инфикс класса Габаритные размеры
X-Малый Никто <576 пикселей
Маленький sm ≥576px
Середина md ≥768px
Большой lg ≥992px
Очень большой xl ≥1200px
Очень большой 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 для нашего макета, системы сетки и компонентов.

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

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

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

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