Вивчіть Bootstrap 4 Grid System за 10 хвилин

Сітчаста система Bootstrap 4 використовується для адаптивних макетів.

Адаптивний макет відображає спосіб вирівнювання елементів на сторінці з різною роздільною здатністю. Важливо, щоб ви зрозуміли, як користуватися сіткою, перед тим, як дізнатись про будь-який інший компонент Bootstrap 4, оскільки який би елемент ви не використовували, вам потрібно буде розмістити його десь на екрані.

Давайте розпочнемо!

Зміст

  • Контейнери Bootstrap 4
  • Bootstrap 4 ряди
  • Bootstrap 4 Стовпці
  • Подальше читання

Сітка Bootstrap 4 складається з контейнерів, рядків і стовпців. Ми візьмемо їх по одному і пояснимо.

Контейнери Bootstrap 4

Контейнер Bootstrap 4 - це елемент класу .container. Контейнер є коренем сіткової системи Bootstrap 4 і використовується для контролю ширини макета.

Контейнер Bootstrap 4 містить усі елементи на сторінці. Це означає, що ваша сторінка повинна мати таку структуру: спочатку тіло сторінки HTML, всередині неї слід додати контейнер та всі інші елементи всередині контейнера.

 ... 

Простий .containerклас встановлює ширину макета залежно від ширини екрана. Він розміщує вміст посередині сторінки, вирівнюючи його по горизонталі. Між контейнером Bootstrap 4 та лівим та правим краєм сторінки є рівний простір.

Ці .containerваги вниз в ширину , як і ширина екрану звужується і стає повної ширини на мобільному телефоні. Ширина контейнера визначається всередині бібліотеки Bootstrap 4 для кожного розміру екрана. Точні розміри ви можете побачити тут.

Контейнер на всю ширину займає 100% розміру екрану незалежно від ширини екрана. Для його використання потрібно додати клас. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

Ви можете переглянути CodePen тут.

Щоб побачити різницю між двома типами контейнерів, ви можете відкрити ручку на консолі та перемикатися між розмірами екрану.

Bootstrap 4 ряди

Bootstrap 4 рядки - це горизонтальні фрагменти екрану. Вони використовуються лише як обгортки для колон. Щоб ними користуватися, потрібен .rowклас.

 ... 

Ось найважливіші речі, які потрібно пам’ятати про Bootstrap 4 рядки:

  • Вони використовуються лише для утримання стовпців. Якщо ви розмістите інші елементи всередині рядка разом зі стовпцями, ви не отримаєте очікуваного результату.
  • Їх доводиться поміщати в контейнери. Якщо ви цього не зробите, ви отримаєте горизонтальну прокрутку на вашій сторінці. Це трапляється тому, що рядки мають від’ємне ліве та праве поле 15. Контейнер має відступи 15 пікселів, тому він протидіє полям.
  • Стовпці мають бути дочірніми для рядка. Інакше вони не вирівняються. Рядки та стовпці створені для спільної роботи в цій суворій ієрархії.

Bootstrap 4 Стовпці

Тепер ми можемо перейти до приємної частини цього підручника, стовпців Bootstrap 4. Стовпці чудові! Вони допомагають розділити екран по горизонталі.

Якщо ви розмістите один рядок у своєму рядку, він займе всю ширину. Якщо додати два стовпці, кожен з них займе 1/2 від ширини. І це стосується будь-якої кількості стовпців.

 ... ... ... ... ... ... ... ... 

Ви можете побачити код у прямому ефірі на CodePen.

Примітка: Стовпці не кольорові. Я щойно додав кольори для більш візуального опису / так вони виглядають красиво.

Встановлення розмірів для стовпців

Використання .colкласу динамічно встановлює ширину стовпця. Це означає, що залежно від кількості стовпців у рядку ширина стовпця буде дорівнювати ширині контейнера, поділеній на кількість стовпців.

Але є інший спосіб визначення стовпців. Ви можете використовувати класи для стовпців і визначити їх розмір.

За замовчуванням сітка Bootstrap 4 складається з 12 стовпців. Для стовпця ви можете вибрати будь-який розмір від 1 до 12. Якщо ви хочете 3 рівні стовпці, ви можете використовувати .col-4для кожного (тому що 3 * 4 cols = 12). Або ви можете встановити для них різні розміри. Ось кілька прикладів:

 ... ... ... ... ... ... ... ... 

Ви можете побачити код у прямому ефірі на CodePen.

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

Встановлення точок зупинку для стовпців

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

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

Точка зупинки - це змінна Bootstrap 4, що означає роздільну здатність екрана. Коли ви вказуєте точку зупинки для класу, ви вказуєте класу бути активним лише для дозволів, які є принаймні настільки великими, як число, яке містить точка зупинки.

Найпростіший клас, про який ми дізнаємось, це .col-[breakpoint]клас. Використовуючи цей клас, ви визначаєте поведінку стовпців лише тоді, коли вони відображаються на пристроях, які мають роздільну здатність щонайменше визначену точку зупинки. До заданої точки зупинку ваші стовпці за замовчуванням будуть вирівнюватися вертикально. А після вашої точки зупинки вони будуть вирівнюватися горизонтально через клас.

Bootstrap має 4 точки зупинку, якими ви можете скористатися:

  • .col-sm для великих мобільних телефонів (пристрої з роздільною здатністю ≥ 576px);
  • .col-md для таблеток (≥768px);
  • .col-lg для ноутбуків (≥992 пікселів);
  • .col-xl для настільних ПК (≥1200px)

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

У нашому прикладі ми використаємо .col-lgточку зупинки і побачимо, як виглядають стовпці на різних екранах. Для роздільної здатності, нижчої за задану точку зупинки (<992px), стовпці відображатимуться вертикально. Це означає, що на мобільних пристроях і планшетах стовпці будуть виглядати так:

А для пристроїв, роздільна здатність яких вища або дорівнює точці розриву (≥992px), стовпці будуть розміщені в одному рядку. Це означає, що на ноутбуках та настільних ПК ви отримаєте такий результат:

 ... ... 

Ви можете побачити код у прямому ефірі на CodePen.Якщо ви відкриєте Codepen в іншому вікні і побачите сторінку з різною роздільною здатністю, ви побачите, як стовпці змінюють своє розташування.

Якщо ви хотіли б, щоб дві колонки йшли в одному рядку, починаючи з більших мобільних телефонів, які ви використовували б .col-sm, для планшетів .col-mdта для дуже великих екранів .col-xl.

Встановлення розмірів і точок зупинки для стовпців

Ви можете поєднувати розміри та точки зупинки та використовувати один формат із форматом .col-[breakpoint]-[size].

Наприклад, якщо ви хочете, щоб три колонки різного розміру вирівнювались по ряду, починаючи з роздільної здатності ноутбука, вам потрібно зробити це:

 ... ... ... 

Ви отримаєте такий результат із роздільною здатністю <992px:

А для екранів із ≥992 пікселів:

Знову ж таки, ви можете побачити код у прямому ефірі на CodePen.

Але що, якщо ви хочете відображати один стовпець на рядок на невеликих мобільних роздільних здатностях, два стовпці на рядок на планшетах та чотири на ноутбуках або пристроях з більш високою роздільною здатністю?

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

 ... ... ... ... 

Результат буде виглядати так на планшетах:

І ось так на ноутбуках та з більш високою роздільною здатністю:

Цей приклад також працює на CodePen.

Як вправу ви можете спробувати створити рядки з різною кількістю стовпців залежно від розміру екрана та перевірити поведінку на консолі браузера.

Залік стовпців

Якщо ви не хочете, щоб ваші стовпці знаходились поруч, ви можете використовувати клас .offset-[breakpoint]-[size]разом із .col-[breakpoint]-[size].

Використання цього класу те саме, що додавання порожнього стовпця перед стовпцем. Ось простий приклад:

 ... ... 

Ви можете побачити код у прямому ефірі на CodePen.

Клас можна використовувати в будь-якому стовпці рядка. Ось ще кілька прикладів:

 ... ... ... ... ... 

Вкладання стовпців

Це може здивувати, але ви можете додати рядок всередині стовпця!

Потім відповідний рядок (який матиме ширину батьківського стовпця) буде розділений на 12 (менших) стовпців, на які ви можете посилатись у .col-* класах.

Давайте подивимося, що відбувається, коли ми вставляємо новий рядок всередину стовпця:

 ... ... ... ... 

Ви можете побачити код у прямому ефірі на CodePen.

Знаючи це, ви можете пройти багато рівнів, щоб упорядкувати свою інформацію. Стовпці дадуть вам простий спосіб керувати своїм простором.

Це підсумовує базові знання щодо реагуючої сіткової системи Bootstrap 4. Якщо у вас є питання, будь ласка, повідомте мене в коментарях, я буду радий відповісти.

Подальше читання

Якщо у вас є більше часу, ось кілька корисних ресурсів:

  • Офіційна сіткова документація від GetBootstrap
  • Відео-підручник від Скрімби

Ця стаття спочатку була розміщена в блозі BootstrapBay. Це частина більшої серії навчальних посібників Bootstrap 4, які називаються 14 днів Bootstrap 4. Якщо ви хочете продовжувати вивчати компоненти Bootstrap 4, ці статті - гарне місце для початку.

І якщо ви хочете почати розробку за допомогою шаблону Bootstrap, ви можете перевірити наш ринок.

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