Система сіток дозволяють створювати просунуті макети з використанням рядів та колонок. Сітка Bootstrap може містити до 12 колонок, і ви можете вказати, як ці колонки масштабуватимуться для різних розмірів області перегляду.
На прикладі сітки Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!--Стилі (щоб ми бачили сітку)--> <style> .bs-example div[class^="col"] { border: 1px solid white; background: #f5f5f5; text-align: center; padding-top: 8px; padding-bottom: 8px; }
</style> <div class="bs-example"> <!--Сітка Bootstrap--> <div class="row"> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div>
</div> <div class="row"> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-7">.col-sm-7</div>
</div> <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div>
</div> <div class="row"> <div class="col-sm-5">.col-sm-5</div> <div class="col-sm-7">.col-sm-7</div>
</div> <div class="row"> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div>
</div> <div class="row"> <div class="col-sm-12">.col-sm-12</div>
</div>
</div>Числа в кінці кожного імені класу означають кількість колонок, що займаються. Так, .col-sm-1 займає одну колонку, а .col-sm-8 — вісім. sm (від слова small — маленький) означає, що колонка застосовується до невеликих пристроїв і всього вище. Ви також можете використовувати md (від medium — середній), lg (large — великий) та xl (extra large — дуже великий) для середніх, великих і дуже великих розмірів.
Для надмалих пристроїв середня частина в імені опускається. Наприклад, .col-8 займає вісім колонок на дуже маленьких пристроях і вище (іншими словами, на всіх пристроях).
Розміщення по горизонталі
У наступному прикладі використовується та сама розмітка, але цього разу ми використовуємо md для «середніх». Це означає, що якщо область перегляду менша за «середній» (тобто менше 768 пікселів), то осередки в сітці будуть розташовуватися один під одним, а кожен осередок займатиме всю ширину.
Якщо ви переглядаєте приклад на широкому на екрані, то приклад може не відрізнятися від попереднього. Однак, якщо ви зменшите розмір свого браузера, комірки зрештою розмістяться один під одним (попередній приклад залишиться без змін).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!--Стилі (щоб ми бачили сітку)--> <style> .bs-example div[class^="col"] { border: 1px solid white; background: #f5f5f5; text-align: center; padding-top: 8px; padding-bottom: 8px; }
</style> <div class="bs-example"> <!--Сітка Bootstrap--> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div>
</div> <div class="row"> <div class="col-md-2">.col-md-2</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-7">.col-md-7</div>
</div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div>
</div> <div class="row"> <div class="col-md-5">.col-md-5</div> <div class="col-md-7">.col-md-7</div>
</div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div>
</div> <div class="row"> <div class="col-md-12">.col-md-12</div>
</div>
</div> Розміри сітки
У наступній таблиці показано, як різні параметри сітки працюють з різними розмірами області перегляду.
| Надмала <576px | Мала ≥576px | Середня ≥768px | Велика ≥992px | Надбільша ≥1200px | |
|---|---|---|---|---|---|
| Максимальна ширина контейнера | Ні (auto) | 540px | 720px | 960px | 1140px |
| Префікс класу | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Кількість колонок | 12 | ||||
| Міжколоночний інтервал | 30px (по 15px з кожної сторони колонки) | ||||
| Вкладення | Так | ||||
| Порядок колонок | Так | ||||
Зверніть увагу, що Bootstrap 4 тепер використовує п'ятирівневу систему сітки (на відміну від чотирирівневої в Bootstrap 3).
Що треба знати про сітки
Контейнери
Сітки повинні розміщуватися в контейнері (за допомогою класу .container або .container-fluid) для правильних відступів і вирівнювання.
Ряди та колонки
Ряди містять один або кілька колонок, у колонах зберігається вміст. Тільки колонки можуть бути безпосередніми нащадками рядів.
padding
Колонки містять padding, однак для першої та останньої колонок padding компенсується негативним margin для ряду. Ось чому вищенаведені приклади містять недолік — вміст усередині сітки вирівнюється з вмістом поза сітки.
Більше 12 колонок на рядок?
Якщо в ряді розміщується більше 12 колонок, то вони переносяться на нову рядок, у своїй колонки переносяться групою. Наприклад, якщо ряд містить col-md-10 і col-md-3, то весь col-md-3 буде перенесено на новий рядок.
Менше 12 стовпців на рядок?
Вам не потрібно задіяти всі 12 стовпців, можете використовувати будь-яку кількість колонок, аж до 12. Наприклад, у вас може бути ряд, в якій загальна кількість колонок дорівнює трьом. точок зупинки, і перевизначають класи сітки, призначених для невеликих пристроїв. Тому використання будь-якого класу.>, col-lg-*, col-xl-*).
Кілька класів
Ви можете увімкнути кілька класів розміру для цього елемента. Наприклад, ви можете використовувати class="col-sm-10 col-md-6", таким чином вказати 10 колонок для маленьких екранів та 6 колонок для середніх та великих екранів.