Точки зупину

Основні поняття

• Точки зупину є будівельними блоками адаптивного дизайну. Використовуйте їх, щоб контролювати, коли ваш макет можна адаптувати до певного вікна перегляду або розміру пристрою.

• Використовуйте медіа-запити, щоб створити свій 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, зверніться до розділу 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

Єдина точка зупину

Існують також медіа-запити та міксини для націлювання на один сегмент розмірів екрана з використанням мінімальної та максимальної ширини точки зупину.

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