Контрольные точки
Точки останова — это настраиваемая ширина, которая определяет, как ваш адаптивный макет ведет себя на разных устройствах или размерах области просмотра в 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
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) { ... }