Основні макети сітки, щоб ви ознайомилися з побудовою в системі сітки Bootstrap.
У цих прикладах .themed-grid-colклас додається до стовпців, щоб додати деяку тематику. Це не той клас, який доступний у Bootstrap за замовчуванням.
У сітковій системі Bootstrap є п’ять рівнів, по одному для кожного діапазону пристроїв, які ми підтримуємо. Кожен рівень починається з мінімального розміру вікна перегляду й автоматично застосовується до більших пристроїв, якщо його не змінити.
Отримайте три стовпці однакової ширини, починаючи з робочих столів і масштабуючи їх до великих робочих столів . На мобільних пристроях, планшетах і нижче стовпці складатимуться автоматично.
Отримайте три стовпці , починаючи від робочих столів і масштабуючи їх до великих робочих столів різної ширини. Пам’ятайте, що кількість стовпців сітки для одного горизонтального блоку має становити до дванадцяти. Більше того, стовпці починають складатися незалежно від вікна перегляду.
Отримайте два стовпці , починаючи з робочих столів і масштабуючи їх до великих робочих столів .
Для елементів повної ширини класи сітки не потрібні.
Згідно з документацією, вкладення є простим — просто помістіть рядок стовпців у наявний стовпець. Це дає вам два стовпці, починаючи з настільних комп’ютерів і масштабуючи їх до великих робочих столів , а ще два (рівної ширини) знаходяться в більшому стовпці.
На мобільних пристроях, планшетах і нижче, ці стовпці та їх вкладені стовпці складатимуться.
Сітка Bootstrap v4 має п’ять рівнів класів: xs (дуже малий, цей інфікс класу не використовується), sm (маленький), md (середній), lg (великий) і xl (дуже великий). Ви можете використовувати майже будь-яку комбінацію цих класів для створення більш динамічних і гнучких макетів.
Кожен рівень класів масштабується, тобто якщо ви плануєте встановити однакову ширину для md, lg і xl, вам потрібно лише вказати md.
Додаткові класи, додані в Bootstrap v4.4, дозволяють контейнерам шириною 100% до певної точки зупину.