Адаптивна сітка Bootstrap 4

Адаптивний дизайн

Адаптивним дизайном називається спосіб верстки, коли ширина макета веб-сторінки підлаштовується під ширину пристрою. Найпростіший варіант - це пропорційна зміна масштабу, але на ділі краще міняти і розташування елементів і їх розміри. Так ми отримаємо найбільш оптимальний вид для смартфонів, планшетів і моніторів.

У Bootstrap вже закладені можливості адаптивного дизайну. Якщо зробити простий Багатоколоночний макет, а потім зменшувати ширину вікна браузера, то буде змінюватися і сам макет.

Сітка Bootstrap 4 - це основна частина фреймворка. Вона призначена для створення адаптивних шаблонів. Сітка Bootstrap 4 грунтується на CSS Flexbox і медіа-запитах (CSS media queries).

У Bootstrap зміни виду макета реалізовано через медіа-запити. Кожен медіа-запит в Bootstrap будується на підставі мінімальної ширини viewport браузера. У Bootstrap ключове значення ширини viewport в медіа-запиті називається breakpoint (контрольною точкою, або більш просто класом пристрою). На схемі наведені основні контрольні точки, які Bootstrap 4 має за замовчуванням:

Контрольні точки мають позначення. Перший breakpoint не має позначення (xs), другий називається - sm, третій - md, четвертий - lg і п'ятий - xl.
Всі класи починаються зі слова col (від англ. Column - стовпець або колонка) і префікса -xl-, -lg-, -md-, -sm-, після якого йде цифра.
Цифра виходить шляхом ділення 12 (максимальна кількість стовпців в сітці Bootstrap) на потрібну кількість колонок. Наприклад, для 2-х колонок рівної ширини знадобляться класи з цифрою 6 в кінці (12: 2 = 6), для 3-х колонок - класи з цифрою 4 (12: 3 = 4), для 4-х колонок - класи з цифрою 3 (12: 4 = 3), для 6-и колонок - класи з цифрою 2 (12: 6 = 2).
Для вибору потрібного варіанта префікса необхідно визначитися, на який дозвіл потрібна певна кількість колонок.

Ці позначення необхідно запам'ятати, тому що вони використовуються в класах, які додаються до елементів. Ці позначення в імені класу будуть вказувати на те з якої ширини viewport певні стилі будуть застосовуватися до елементу.

Контрольні точки задають тільки мінімальну ширину. Тобто, наприклад, якщо визначено, що макет, який використовує в ньому класи без позначення контрольної точки (xs) і з використанням md, то він на sm матиме таку ж структуру як на xs, а на lg і xl - як на md

Класи сітки

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Максимальна ширина контейнера .container	Нема (auto)	540px	720px	960px	1140px
Префікс класа	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Число колонок	12
Ширина відступу	30px (15px з кожної сторони стовпчика)
Може бути вкладеним	так
Впорядкування колонок	так

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

Приклади:

Адаптивний блок <div class = "col-12 col-sm-6 col-xl-3"> на пристроях md і lg матиме ширину, рівну 6 колонкам Bootstrap: (12) -> sm (6) -> md -> lg -> xl (3).

Адаптивний блок <div class = "col-8 col-md-4"> на пристрої sm матиме ширину, рівну 8 колонкам Bootstrap, а на пристроях lg і xl - ширину, рівну 4 колонкам Bootstrap: (8) -> sm - > md (4) -> lg -> xl.

Адаптивний блок <div class = "col-6"> на всіх пристроях матиме ширину, рівну 6 колонкам Bootstrap: (6) -> sm -> md -> lg -> xl.

See the Pen Responsive col bs4 by kravets (@raisa69) on CodePen.

На смартфнах - xs (не вказується в Bootstrap 4) блоки повинні розташовуватися вертикально і мати ширину, рівну ширині батьківського контейнера (тобто 12 колонок Bootstrap).

<div class="container-fluid">
  <div class="row">
    <div class="col-12">1</div>
    <div class="col-12">2</div>
    <div class="col-12">3</div>
    <div class="col-12">4</div>
    <div class="col-12">5</div>
    <div class="col-12">6</div>
  </div>
</div>

На планшетах - sm блоки повинні розташовуватися на 3 рядках по 2 блоки в кожному рядку. Кожен блок повинен мати ширину, що дорівнює 50% ширини батьківського елементу (6 колонок Bootstrap).

Швидке очищення стовпців

Завдяки наявним чотирьом рівням сіток виникає проблема, коли на певних точках зупинки стовпці не чітко очищаються, оскільки один вищий за інший. Щоб це виправити, потрібно використовувати утиліту .clearfix

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6">1</div>
    <div class="col-12 col-sm-6">2</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-12 col-sm-6">3</div>
    <div class="col-12 col-sm-6">4</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-12 col-sm-6">5</div>
    <div class="col-12 col-sm-6">6</div>
  </div>
</div>

See the Pen col-sm-6-bs4 by kravets (@raisa69) on CodePen.

На ноутбуках - md блоки повинні розташовуватися на 2 рядках по 3 блоки в кожному рядку. Кожен блок повинен мати ширину, рівну 33.3% ширини батьківського елементу (4 колонки Bootstrap).

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4">1</div>
    <div class="col-12 col-sm-6 col-md-4">2</div>
    <!--Перед блоком sm, який має починатися з нового рядка-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-12 col-sm-6 col-md-4">3</div>
    <!--Перед блоком md,  який має починатися з нового рядка-->
    <div class="clearfix visible-md-block"></div>
    <div class="col-12 col-sm-6 col-md-4">4</div>
    <!--Перед блоком sm,  який має починатися з нового рядка-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-12 col-sm-6 col-md-4">5</div>
    <div class="col-12 col-sm-6 col-md-4">6</div>
  </div>
</div>

See the Pen col-sm-6-md4-bs4 by kravets (@raisa69) on CodePen.

На десктопах - lg блоки повинні розташовуватися на 2 рядках. На першому ряку2 блоки, а на другому - 4 блоки

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-6">1</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-6">2</div>
    <!--Перед блоком sm и lg, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block visible-lg-block"></div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">3</div>
    <!--Перед блоком md, который должен начинаться с новой строки-->
    <div class="clearfix visible-md-block"></div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">4</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">5</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">6</div>
  </div>
</div>

See the Pen col-sm-6-md-4-lg3-bs4 by kravets (@raisa69) on CodePen.

Для оптимізації коду, потрібно прибрати, де можливо класи col - * - 12, тому що адаптивні блоки Bootstrap за замовчуванням займають ширину, рівну 100%.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-6">1</div>
    <div class="col-sm-6 col-md-4 col-lg-6">2</div>
    <!--Перед блоком sm и lg, який має починатися з нового рядка->
    <div class="clearfix visible-sm-block visible-lg-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-3">3</div>
    <!--Перед блоком md, який має починатися з нового рядка-->
    <div class="clearfix visible-md-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-3">4</div>
    <!--Перед блоком sm, який має починатися з нового рядка-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-3">5</div>
    <div class="col-sm-6 col-md-4 col-lg-3">6</div>
  </div>
</div>

Основний принцип верстки макету

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

Наприклад, в наявний макет, а саме в адаптивний блок col-8 вкладеноо ще 2 блоки і 2 адаптивних блока в ряд:

<div class="container">
    <div class="row">
        <div class=col-8>
            <div class="row">
                <div class=col-6>...</div>
                <div class=col-6>...</div>
            </div>
        <div class=col-4>...</div>
    </div>    
</div>

Вирівнювання адаптивних блоків

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

Вирівнювання адаптивних блоків в межах лінії ряду по вертикалі здійснюється за допомогою одного з наступних класів, який необхідно додатково додати до row:

align-items-start (щодо початку лінії);

align-items-center (по центру);

align-items-end (щодо кінця).

<div class="row align-items-center">
    <div class="col"> 1/2 </div>
    <div class="col"> 2/2 </div>
</div>

Вирівнювання якогось певного адаптивного блоку по вертикалі в межах лінії може здійснюватися одним з таких класів:

align-self-start (щодо початку лінії);
align-self-center (по центру);
align-self-end (щодо кінця).

Дані класи необхідно додавати до адаптивним блокам, а не до ряду.

<div class="row align-items-center">
    <div class="col"> (1) </div>
    <div class="col align-self-end"> (2) </div>
</div>

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

justify-content-start (щодо початку лінії ряду - за замовчуванням);
justify-content-center (по центру);
justify-content-end (щодо кінця лінії);
justify-content-around (рівномірно, з урахуванням простору перед першим і останнім адаптивним блоком);
justify-content-between (рівномірно, з однаковим простором між адаптивними блоками).

<div class="row justify-content-around">
    <div class="col-4"> (1) </div>
    <div class="col-4"> (2) </div>
</div>

Зсув адаптивних блоків

В Bootstrap 4 зміщення адаптивних блоків можна виконати за допомогою:

класів offset (на певну кількість колонок);
службових (утилітних) margin класів.

Класи offset

Класи offset призначені для зміщення адаптивних блоків вправо на певну кількість колонок.

Дані класи мають наступний синтаксис:

оffset- {1} або offset- {breakpoint} - {1}

{breakpoint} - контрольна точка, починаючи з якої до даного блоку буде застосовано зсув (якщо не вказано, то зміщення буде застосовано, починаючи з носилися пристроїв).

{2} - величина зміщення, що вказується за допомогою кількості колонок Bootstrap.

<div class="row">
  <div class="col-4"> (1) </div>
  <div class="col-4 offset-4"> (2) </div>
</div>
<div class="row">
  <div class="col-3 offset-3"> (1) </div>
  <div class="col-3 offset-3"> (2) </div>
</div>
<div class="row">
  <div class="col-6 offset-3"> (1) </div>
</div>

Зсув за допомогою margin класів

В четвертій версії Bootstrap встановлювати зміщення адаптивним блокам також можна за допомогою margin відступів (margin-left: auto і (або) margin-right: auto).

Зміщення за допомогою margin класів використовують, коли блоки необхідно змістити відносно один від одного на деяку змінну величину.

У Bootstrap 4 для більш зручного і адаптивного задання блокам margin відступів (margin-left: auto і (або) margin-right: auto) можна використовувати класи ml-auto, mr-auto, ml- {breakpoint} -auto і mr- { breakpoint} -auto.

See the Pen col-margin-bs4 by kravets (@raisa69) on CodePen.

Зміна візуального порядку проходження адаптивних блоків

За замовчуванням адаптивні блоки візуально відображаються в тому порядку, в якому вони розташовані в HTML коді.

Зміна візуального порядку розташування адаптивного блоку в Bootstrap 4 виконується за допомогою класу

order- {visual_number} - цей клас призначений для контрольної точки xs.

Якщо порядок елемента потрібно визначити не для контрольної точки xs, а для sm, md, lg або xl, то використовується наступний варіант даного класу:

order- {breakpoint} - {visual_number}

Замість {visual_number} необхідно вказати число від 1 до 12. Це число і визначає те, як елементи будуть візуально слідувати на сторінці в порядку зростання цих номерів. Якщо елементу не встановлено клас order, то за замовчуванням він має значення 0. Крім чисел (за замовчуванням від 1 до 12) можна ще використовувати слова first і last

See the Pen order-col-bs4 by kravets (@raisa69) on CodePen.

See the Pen order-last-first-bs4 by kravets (@raisa69) on CodePen.

Вкладені сітки Bootstrap

Блок сітки теж може бути контейнером для інших блоків. Щоб вкласти контент в сітку за замовчуванням, потрібно додати новий клас .row і набір колонок .col-sm- * всередині існуючої колонки .col-sm- *. Вкладені ряди повинні включати набір колонок, які додаються до 12-ти або просто кільком (не обов'язково використовувати всі 12 можливих колонок).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>