Огляд
Компоненти та параметри для компонування вашого проекту Bootstrap, включаючи обгортання контейнерів, потужну систему сітки, гнучкий медіа-об’єкт і адаптивні класи утиліт.
Контейнери
Контейнери є найпростішим елементом макета в Bootstrap і є обов’язковими під час використання нашої сітки за замовчуванням . Контейнери використовуються для розміщення, розміщення та (іноді) центрування вмісту в них. Хоча контейнери можуть бути вкладеними, більшість макетів не вимагають вкладеного контейнера.
Bootstrap поставляється з трьома різними контейнерами:
.container
, який встановлює дляmax-width
кожної відповідної точки зупинки.container-fluid
, який знаходитьсяwidth: 100%
на всіх точках зупину.container-{breakpoint}
,width: 100%
до вказаної точки зупинки
У наведеній нижче таблиці показано, як кожен контейнер max-width
порівнюється з оригіналом .container
і .container-fluid
по кожній точці зупину.
Перегляньте їх у дії та порівняйте в нашому прикладі Grid .
Дуже малий <576 пікселів |
Малий ≥576 пікселів |
Середній ≥768 пікселів |
Великий ≥992 пікселів |
Дуже великий ≥1200 пікселів |
|
---|---|---|---|---|---|
.container |
100% | 540 пікселів | 720 пікселів | 960 пікселів | 1140 пікселів |
.container-sm |
100% | 540 пікселів | 720 пікселів | 960 пікселів | 1140 пікселів |
.container-md |
100% | 100% | 720 пікселів | 960 пікселів | 1140 пікселів |
.container-lg |
100% | 100% | 100% | 960 пікселів | 1140 пікселів |
.container-xl |
100% | 100% | 100% | 100% | 1140 пікселів |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Все в одному
Наш .container
клас за замовчуванням — це адаптивний контейнер із фіксованою шириною, що означає його max-width
зміни в кожній точці зупину.
<div class="container">
<!-- Content here -->
</div>
Рідина
Використовуйте .container-fluid
для контейнера повної ширини, що охоплює всю ширину вікна перегляду.
<div class="container-fluid">
...
</div>
Чуйний
Чуйні контейнери є новим у Bootstrap v4.4. Вони дозволяють вказати клас із шириною 100%, доки не буде досягнуто вказану точку зупину, після чого ми застосовуємо max-width
s для кожної з вищих точок зупину. Наприклад, .container-sm
має 100% ширину для початку, доки не sm
буде досягнуто точки зупинки, де вона буде збільшуватися за допомогою md
, lg
і xl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
Чуйні точки зупину
Оскільки Bootstrap розроблено перш за все для мобільних пристроїв, ми використовуємо кілька медіа-запитів , щоб створити розумні точки зупину для наших макетів та інтерфейсів. Ці контрольні точки здебільшого базуються на мінімальній ширині вікна перегляду та дозволяють нам збільшувати масштаб елементів у міру зміни вікна перегляду.
Bootstrap переважно використовує наведені нижче діапазони медіа-запитів або точки зупину в наших вихідних файлах Sass для нашого макета, системи сітки та компонентів.
// Extra 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) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Оскільки ми пишемо вихідний CSS у Sass, усі наші медіа-запити доступні через міксини Sass:
// 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) { ... }
// 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;
}
}
Час від часу ми використовуємо медіа-запити, які йдуть в іншому напрямку (даного розміру екрана або менше ):
// Extra 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) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
min-
префікси max-
та вікна перегляду з дробовою шириною (що може виникнути за певних умов, наприклад, на пристроях з високою роздільною здатністю), використовуючи для цих порівнянь значення з вищою точністю. .
Знову ж таки, ці медіа-запити також доступні через міксини Sass:
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
Існують також медіа-запити та міксини для націлювання на один сегмент розмірів екрана з використанням мінімальної та максимальної ширини точки зупину.
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Ці медіа-запити також доступні через міксини 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) { ... }
Подібним чином медіа-запити можуть охоплювати кілька ширин точок зупину:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
Суміш Sass для націлювання на той самий діапазон розміру екрана буде:
@include media-breakpoint-between(md, xl) { ... }
Z-індекс
Кілька компонентів Bootstrap використовують z-index
властивість CSS, яка допомагає контролювати макет, надаючи третю вісь для впорядкування вмісту. Ми використовуємо шкалу z-індексу за замовчуванням у Bootstrap, яка була розроблена для належної навігації, підказок і спливаючих вікон, модальних елементів тощо.
Ці вищі значення починаються з довільного числа, достатньо високого та конкретного, щоб ідеально уникнути конфліктів. Нам потрібен стандартний набір цих елементів для наших багатошарових компонентів — підказок, спливаючих вікон, навігаційних панелей, спадних меню, модальних — щоб ми могли бути достатньо послідовними у поведінці. Немає причин, чому ми не могли б використати 100
+ або 500
+.
Ми не заохочуємо налаштування цих індивідуальних значень; якщо ви зміните один, вам, швидше за все, доведеться змінити їх усі.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
Для обробки меж компонентів, що перекриваються (наприклад, кнопок і входів у групах вводу), ми використовуємо низькі однозначні z-index
значення 1
, 2
і 3
для станів за замовчуванням, наведення та активного стану. При наведенні/фокусуванні/активності ми виводимо певний елемент на передній план із вищим z-index
значенням, щоб показати його межу над однотипними елементами.