Bootstrap 4. Система сіток.

Відео: Уроки Bootstrap верстки / # 2 - Верстка за допомогою сіток (Grid-system)

Відео: Bootstrap сітка, PSD

Всім привіт! У цій статті ми розглянемо, що таке система сіток і як вона влаштована в Bootstrap 4.

У новій, четвертій версії Bootstrap система сіток була змінена, і тепер вона працює на Flexbox. Це дуже добре, але давайте спочатку поговоримо, що ж це за система така?

система сіток - це сітка, розділена на рядки і ряди. Тобто це, по суті, таблиця. В Bootstrap сітка має 12 рядів, а рядків може бути стільки, скільки вам потрібно. Ідея в тому, що ви можете розміщувати контент досить чітко, використовуючи ряди сітки. Наприклад, тому що в Bootstrap 12 рядів, ви можете зробити дві колонки по 6 рядів зліва і справа. Таким же чином ви можете розбити ваш сайт на 3 колонки по 4 ряди кожна і так далі.

У Bootstrap ми задаємо елементу клас, який показує, скільки рядів цей елемент повинен займати в сітці. Давайте розглянемо деякі приклади:

Все наше вміст має бути в контейнері, як було сказано в попередній статті. Далі ми створюємо блок з рядком, в якому вказуємо, що у нас в ньому буде два блоки кожен по 6 колонок. SM в класі значить, що це буде працювати для всіх розмірів екрану, крім маленьких. На них колонки будуть вибудовуватися один з одним. Якщо ви sm поміняєте на md, то колонки будуть вибудовуватися один під одним вже на середніх розмірах екрану.

Відео: Як користуватися Bootstrap сіткою

Розглянемо ще один приклад:

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

Відео: Уроки Bootstrap верстки / # 3 - Система сіток і адаптивне меню

Якщо ви хочете, щоб колонки завжди для всіх розмірів екрану були якоїсь певної ширини, то просто не вказуйте значення екрану в класі:

А на цьому сьогодні все. Дякую за увагу!