Приклади сіток Bootstrap

Основні макети сітки, щоб ви ознайомилися з побудовою в системі сітки Bootstrap.

У цих прикладах .themed-grid-colклас додається до стовпців, щоб додати деяку тематику. Це не той клас, який доступний у Bootstrap за замовчуванням.

П'ять рівнів сітки

У сітковій системі Bootstrap є п’ять рівнів, по одному для кожного діапазону пристроїв, які ми підтримуємо. Кожен рівень починається з мінімального розміру вікна перегляду й автоматично застосовується до більших пристроїв, якщо його не змінити.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Три рівні стовпчики

Отримайте три стовпці однакової ширини, починаючи з робочих столів і масштабуючи їх до великих робочих столів . На мобільних пристроях, планшетах і нижче стовпці складатимуться автоматично.

.col-md-4
.col-md-4
.col-md-4

Три нерівних стовпчика

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

.col-md-3
.col-md-6
.col-md-3

Дві колонки

Отримайте два стовпці , починаючи з робочих столів і масштабуючи їх до великих робочих столів .

.col-md-8
.col-md-4

Повна ширина, одна колонка

Для елементів повної ширини класи сітки не потрібні.


Два стовпці з двома вкладеними стовпцями

Згідно з документацією, вкладення є простим — просто помістіть рядок стовпців у наявний стовпець. Це дає вам два стовпці, починаючи з настільних комп’ютерів і масштабуючи їх до великих робочих столів , а ще два (рівної ширини) знаходяться в більшому стовпці.

На мобільних пристроях, планшетах і нижче, ці стовпці та їх вкладені стовпці складатимуться.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Змішаний: мобільний і настільний

Сітка Bootstrap v4 має п’ять рівнів класів: xs (дуже малий), sm (маленький), md (середній), lg (великий) і xl (дуже великий). Ви можете використовувати майже будь-яку комбінацію цих класів для створення більш динамічних і гнучких макетів.

Кожен рівень класів масштабується, тобто якщо ви плануєте встановити однакову ширину для xs і sm, вам потрібно лише вказати xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Змішаний: мобільний, планшетний і комп’ютерний

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4