1. призначення сітки
2. елементи сітки
3. обгортковий контейнери
4. ряди
5. адаптивні блоки
6. Адаптивні блоки без колонок
7. Розташування адаптивних блоків в ряду
8. Основний принцип верстки макету
9. Вирівнювання адаптивних блоків
10. Вертикальне вирівнювання адаптивних блоків
11. Горизонтальне вирівнювання адаптивних блоків
12. Адаптивна розмітка без полів
13. Зсув адаптивних блоків
14. класи offset
15. Зсув за допомогою margin класів
16. Зміна візуального порядку проходження адаптивних блоків
17. Приклад адаптивної верстки на сітці Boostrap 4

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

призначення сітки

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

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

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

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

Контрольні точки (назви пристроїв) сітки Bootstrap 4

Фреймворк Bootstrap 4 має 5 контрольних точок або назв пристроїв (без позначення, sm, md, lg, xl), і, отже, дозволяє створити макет, який на кожній з них може виглядати по-різному.

Ширина viewport браузера Контрольна точка (назва пристрою)> = 0 без позначення (xs)> = 576px sm> = 768px md> = 992px lg> = 1200px xl

У Bootstrap 4 в порівнянні з Bootstrap 3 змінено кількість контрольних точок. У Bootstrap 3 їх було чотири: xs, sm, md і lg.

елементи сітки

Сітка Bootstrap 4 складається з наступних елементів:

• Обгортковий контейнери (container і container-fluid);
• Ряди (row);
• Адаптивні блоки (col).

обгортковий контейнери

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

Bootstrap 4 - обгортковий контейнер

У Bootstrap 4 є 2 види обгорткового контейнерів: адаптивно-фіксований і адаптивно-гумовий.

HTML-розмітка адаптивно-фіксованого контейнера:

<Div class = "container"> ... </ div>

HTML-розмітка адаптивно-гумового контейнера:

<Div class = "container-fluid"> ... </ div>

Перший (адаптивно-фіксований) контейнер використовується тоді, коли необхідно створити макет з шириною, яка повинна залишатися незмінною в межах певної ширини області перегляду (viewport) браузера.

Bootstrap 4 - Ширина адаптивно-фіксованого контейнера (container)

Залежність ширини адаптивно-фіксованого контейнера від ширини viewport браузера приведена в таблиці:

Ширина viewport браузера Контрольна точка (назва пристрою) Ширина адаптивно-фіксованого контейнера (container)> = 0 без позначення (xs) 100%> = 576px sm 540px> = 768px md 720px> = 992px lg 960px> = 1200px xl 1140px

Це означає, що адаптивно-фіксований контейнер матиме:

• 100% ширину при ширині viewport до 576px;
• 540px при ширині viewport від 576 до 768px;
• 720px при ширині viewport від 768 до 992px і т.д

У горизонтальному напрямку фіксований-адаптивний контейнер позиціонується по центру, це здійснюється в bootstrap.css за допомогою CSS властивостей margin-left: auto і margin-right: auto.

Другий (адаптивно-гумовий) контейнер застосовується тоді, коли вам необхідно створити повністю гнучкий макет сторінки або деякого блоку. Даний контейнер має 100% ширину при будь-якій ширині viewport.

Bootstrap 4 - Ширина адаптивно-гумового контейнера (container) Ширина viewport браузера Контрольна точка (назва пристрою) Ширина адаптивно-гумового контейнера (container-fluid)> = 0 без позначення (xs) 100%> = 576px sm> = 768px md> = 992px lg> = 1200px xl

Крім цього обгортковий контейнери (container і container-fluid) мають ще внутрішні відступи (padding) зліва і справа по 15px. Установка внутрішніх відступів обгортковий контейнерів здійснюється в CSS файлі Bootstrap 4 за допомогою властивостей padding-left: 15px і padding-right: 15px.

При створенні макета за допомогою сітки Bootstrap 4 не пишіть одні обгортковий контейнери всередині інших.

ряди

Ряд - це спеціальний елемент сітки (row), який використовується при створенні макета в наступних випадках:

• між контейнером і адаптивними блоками, які треба в нього помістити;
• між одним та іншими адаптивними блоками, які треба помістити в перший адаптивний блок.

Bootstrap 4 - Ряд (row)

HTML-розмітка ряду:

<Div class = "row"> ... </ div>

На відміну від Bootstrap 3, в якій ряд виступав тільки для компенсації лівих і правих внутрішніх padding полів обгортковий контейнерів або адаптивних блоків, в Bootstrap 4 він грає дуже важливу роль. Це пов'язано з тим, що дана сітка побудована на CSS Flexbox . У цій сітки він виступає в ролі flex-контейнера для flex-елементів (адаптивних блоків). Тобто якщо ви будете використовувати адаптивні блоки поза ряду, вони працювати не будуть. У Bootstrap 4 адаптивні блоки повинні обов'язково перебувати в блоці з класом row.

Компенсація внутрішніх padding полів здійснюється так само як і в Bootstrap 3, за рахунок негативних лівих і правих зовнішніх відступів, рівних 15px (margin-left: -15px і margin-right: -15px).

Приклад того, як відбувається компенсація padding полів:

<! - 1 приклад -> container (+ 15px) -> row (-15px) -> col (+ 15px) -> контент <! - 2 приклад -> container-fluid (+ 15px) -> row (-15px) -> col (+ 15px) -> row (-15px) -> col (+ 15px) -> контент

В результаті відступ від лівого і правого країв обгортковий контейнера до контенту завжди буде складати 15px.

Крім цього адаптивні блоки логічно не пов'язані між собою не обов'язково поміщати в один ряд в рамках якогось обгортковий контейнера або іншого адаптивного блоку. Найбільш коректно їх розбити на окремі логічні групи і помістити кожну з них в окремий ряд (row).

наприклад:

<Div class = "container"> <! - Контент розбитий на 2 row -> <div class = "row"> <div class = "col-6"> ... </ div> <div class = " col-6 "> <! - Контент розбитий на 3 row -> <div class =" row "> ... </ div> <div class =" row "> ... </ div> <div class =" row " > ... </ div> </ div> <div class = "row"> ... </ div> </ div>

адаптивні блоки

Адаптивні блоки - це основні будівельні елементи адаптивного макета, саме від них залежатиме, як буде виглядати макет веб-сторінки на різних контрольних точках (без позначення, sm, md, lg і xl).

Bootstrap 4 - Адаптивні блоки (col)

Створюється адаптивний блок дуже просто: за допомогою додавання одного або декількох класів col -? -? до необхідного HTML елементу.

У класі замість першого знака питання вказується назва контрольної точки: без позначення, sm, md, lg або xl. Замість другого знака питання вказується ширина адаптивного блоку, яку він повинен мати на зазначеній контрольній точці. Ширина адаптивного блоку задається у відносній формі за допомогою числа від 1 до 12 (колонок Bootstrap).

Дане число визначає, яку частину ширини буде займати адаптивний блок на зазначеній контрольній точці від ширини батьківського блоку, тобто ряду. Ширина ряду в числовому вираженні (колонках Bootstrap) дорівнює 12.

Наприклад, блок з класом col-md-4 на контрольній точці md буде займати 4/12 ширини ряду, тобто 33,3% (тобто 4/12 * 100% = 33.3%).

Ширина viewport Контрольна точка Клас Ширина адаптивного блоку Крихітна ширина (> = 0) без позначення (xs) col-? від col-1 до col-12 Маленька ширина (> = 576px) sm col-sm-? від col-sm-1 до col-sm-12 Середня ширина (> = 768px) md col-md-? від col-md-1 до col-md-12 Велика ширина (> = 992px) lg col-lg-? від col-lg-1 до col-lg-12 Дуже велика ширина (> = 1200px) xl col-xl-? від col-xl-1 до col-xl-12

Адаптивні блоки, також як і контейнери мають внутрішні відступи зліва і справа по 15px. Дані відступи у адаптивних блоків фреймворка Bootstrap 4 встановлюються за допомогою CSS властивостей padding-left: 15px і padding-right: 15px.

Розміщувати адаптивні блоки необхідно в ряду. Тобто у будь-якого адаптивного блоку як батько повинен бути блок з класом row.

Наприклад, розглянемо, яку ширину на кожному пристрої матиме наступний адаптивний блок:

<Div class = "row"> <! - Адаптивний блок Bootstrap -> <div class = "col-12 col-sm-9 col-md-7 col-lg-5 col-xl-3"> .. . </ div> </ div>

Даний адаптивний блок матиме:

• до sm (на xs) ширину, рівну 12 колонкам Bootstrap (тобто 12/12 * 100% = 100% від ширини ряду);
• на пристрої sm ширину, рівну 9 колонкам Bootstrap (тобто 9/12 * 100% = 75% від ширини ряду);
• на пристрої md ширину, рівну 7 колонкам Bootstrap (тобто 7/12 * 100% = 58,3% від ширини ряду);
• на пристрої lg ширину, рівну 5 колонок Bootstrap (тобто 5/12 * 100% = 41,6% від ширини ряду);
• на пристрої xl ширину, рівну 3 колонкам Bootstrap (тобто 3/12 * 100% = 25% від ширини ряду).

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

приклади:

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

Адаптивні блоки без колонок

У сітку Bootstrap 4 додані спеціальні класи col, col-sm, col-md, col-lg, col-xl, col-auto, col-sm-auto, col-md-auto, col-lg-auto і col-xl -auto.

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

Розглянемо кілька прикладів.

1. Створення в ряду 5 адаптивних блоків з однаковою шириною.

<Div class = "row"> <div class = "col"> 1/5 </ div> <div class = "col"> 2/5 </ div> <div class = "col"> 3/5 < / div> <div class = "col"> 4/5 </ div> <div class = "col"> 5/5 </ div> </ div>

Розрахунок ширини:

• вільний простір лінії - 100% (тому що їх ширина дорівнює 0);
• ширина кожного адаптивного блоку - 20% (100% / 5);

2. Ширина блоків з класом col при наявності в лінії адаптивного блоку з кількістю колонок.

&lt;Div class = "row"> <div class = "col">? &lt;/ Div> <div class = "col-7"> 7 колонок </ div> <div class = "col">? &lt;/ Div> <div class = "col">? </ Div> </ div>

Розрахунок ширини:

• вільний простір лінії - 41,67% ((12-7) / 12 * 100%);
• ширина кожного адаптивного блоку, крім col-7 - 13,89% (41,67% / 3).

У деяких версіях браузерах Safari є помилка при використанні такої розмітки, вона може бути розбита на кілька ліній.

Виправити це можна 2 способами:

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

<Div class = "row"> <div class = "col"> ... </ div> <div class = "col"> ... </ div> <div class = "w-100"> </ div> <div class = "col"> ... </ div> <div class = "col"> ... </ div> </ div>

Дана дія здійснюється за допомогою додавання в розмітку перед адаптивним блоком, який повинен починатися з нової лінії, порожнього div елементу з класом w-100.

Якщо дана дія необхідно використовувати тільки для деяких контрольних точок, то до нього (класу w-100) додатково потрібно ще додати службові чуйні класи Bootstrap 4.

У цьому прикладі переноситися на нову лінію адаптивні блоки будуть тільки на пристроях, що мають крихітний або маленький viewport.

<Div class = "row"> <div class = "col"> ... </ div> <div class = "col"> ... </ div> <div class = "d-block d-md- none w-100 "> </ div> <div class =" col "> ... </ div> <div class =" col "> ... </ div> </ div>

Друга група класів (col-auto, col-sm-auto, col-md-auto, col-lg-auto і col-xl-auto) призначена для створення адаптивних блоків, ширина яких буде визначатися відповідно до їх вмістом.

наприклад:

<Div class = "row"> <div class = "col"> (1) </ div> <div class = "col-md-auto"> (2) - ширина на контрольних точках md, lg і xl буде визначатися на підставі вмісту </ div> <div class = "col col-lg-2"> (3) </ div> </ div>

В результаті:

• на xs і sm адаптивні блоки будуть розташовуватися вертикально (один під іншим) і займати всю ширину ряду;
• на md адаптивний блок 2 буде мати ширину, необхідну для відображення свого вмісту; якщо блок 2 цієї статті не буде займати всю ширину ряду, то адаптивні блоки 1 і 3 поділять його між собою порівну; якщо ж блок 2 займатиме всю ширину лінії, то картина буде така ж, як на контрольних точках xs і sm;
• на lg і xl адаптивний блок 2 буде мати ширину, необхідну для відображення свого вмісту; якщо блок 2 цієї статті не буде займати всю ширину ряду, то блок 3 займатиме ширину, рівну 2 колонкам Bootstrap, а блок 1 - все ширину ряду; якщо блок 2 займатиме всю ширину ряду, то розмітка буде така ж, як на xs і sm, тільки 3 блок на 3 лінії матиме ширину, рівну 2 колонкам Bootstrap.

Розташування адаптивних блоків в ряду

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

Bootstrap 4 - Розташування адаптивних блоків в ряду <Div class = "container"> <div class = "row"> <div class = "col-6"> (1) </ div> <div class = "col-6"> (2) </ div> <div class = "col-12"> (3) </ div> <div class = "col-8"> (4) </ div> </ div> </ div>

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

<Div class = "row"> <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"> </ div> <div class = "col -xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1 "> </ div> <! - Цей адаптивний блок перенесеться на нову лінію на xs -> <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"> </ div> <! - Цей адаптивний блок перенесеться на нову лінію на sm -> <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"> </ div> <! - Цей адаптивний блок перенесеться на нову лінію на xs і md- -> <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"> </ div> <div class = "col-xs-6 col- sm-4 col-md-3 col-lg-2 col-xl-1 "> </ div> <! - Цей адаптивний блок перенесеться на нову лінію на xs, sm і lg -> <div class =" col -xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1 "> </ div> </ div>

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

Основний принцип верстки макету веб-сторінки на сітці Bootstrap 4 полягає у вкладанні одних адаптивних блоків в інші.

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

Розміщувати контент веб-сторінки слід тільки в адаптивних блоках.

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

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

Для цього попередньо необхідно в блок col-8 покласти ряд (контейнер для адаптивних блоків):

<Div class = "container"> <div class = "row"> <div class = col-8> <div class = "row"> ... </ div> <div class = col-4> ... </ div> </ div> </ div> Bootstrap 4 - Вставка ряду в вміст адаптивного блоку col-8

Після цього додамо 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 - Вставка адаптивних блоків в ряд

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

Вирівнювання адаптивних блоків в горизонтальному і вертикальному напрямку здійснюється в 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 (щодо кінця).

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

Наприклад, вирівнюємо адаптивний блок 2 по нижньому краю лінії:

<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 >

Адаптивна розмітка без полів

Внутрішні поля (padding) адаптивних блоків і зовнішні негативні відступи (margin) рядів можна прибрати, якщо до останніх (тобто до row) додати клас no-gutters.

<Div class = "row no-gutters"> <div class = "col-6"> <! - На цей блок row і на його адаптивні блоки це властивість вже не пошириться -> <div class = "row"> <div class = col-8> ... </ div> <div class = col-4> ... </ div> </ div> </ div> <div class = "col-6"> .. . </ div> </ div>

Зверніть увагу, що даний клас (no-gutters) діє тільки на адаптивні блоки, які безпосередньо розміщені в цьому ряду. Тобто на адаптивні блоки, які не мають в якості батька даний ряд, CSS властивості по прибиранні padding не поширяться.

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

У 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). Ця варіант зміщення з'явився завдяки тому, що сітка в новій версії Bootstrap (4) ґрунтується на CSS Flexbox.

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

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

Bootstrap 4 - Зсув адаптивних блоків <Div class = "row"> <div class = "col-4"> (1) </ div> <div class = "col-4 ml-auto"> (2) </ div> </ div> < div class = "row"> <div class = "col-3"> (1) </ div> <div class = "col-3 ml-auto mr-auto"> (2) </ div> <div class = "col-3"> (3) </ div> </ div> <div class = "row"> <div class = "col-4 ml-auto mr-auto"> (1) </ div> < div class = "col-4 ml-auto mr-auto"> (2) </ div> </ div>

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

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

Змінити візуальний порядок проходження адаптивного блоку в Bootstrap 4 виконується за допомогою класу order- {visual_number}. Цей клас призначений для контрольної точки xs. Якщо порядок елемента потрібно визначити не для контрольної точки xs, а для sm, md, lg або xl, то використовується наступний варіант даного класу:

order- {breakpoint} - {visual_number}

Замість {visual_number} необхідно вказати число від 1 до 12.

Це число і визначає те, як елементи будуть візуально слідувати на сторінці. А саме все адаптивні елементи будуть візуально слідувати в порядку зростання цих номерів. Якщо елементу не встановлено клас order, то за замовчуванням він має значення 0.

Наприклад, змінимо порядок проходження двох адаптивних блоків:

<Div class = "row"> <div class = "col"> Перший (НЕ упорядкований, без класу order-) <! - За замовчуванням order, дорівнює 0, тому він і перший -> </ div> <div class = "col order-12"> Другий, але буде відображатися останнім </ div> <div class = "col order-1"> Третій, але буде відображатися другим </ div> </ div>

Ще один приклад (з використанням адаптивних класів order):

<Div class = "row"> <div class = "col-md-8 order-2 order-md-1"> Перший (на xs, sm буде відображатися другим) </ div> <div class = "col-md -4 order-1 order-md-2 "> Другий (на xs, sm буде відображатися першим) </ div> </ div>

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

Класи order-first і order- {breakpoint} -first надають свою дію за допомогою установки елементу CSS властивості order зі значенням -1 (order: -1), а класи order-last і order- {breakpoint} -last - CSS властивості order зі значенням 13 (order: $ columns + 1).

Перепишемо вищенаведений приклад з використанням класів order, в яких використовуються ключові слова first і last:

<Div class = "row"> <div class = "col-md-8 order-last order-md-first"> Перший (на xs, sm буде відображатися останнім) </ div> <div class = "col-md -4 order-first order-md-last "> Останній (на xs, sm буде відображатися першим) </ div> </ div>

Приклад з використанням класів order як з числом, так і зі словами first і last:

<Div class = "row"> <div class = "col-3 order-sm-last order-md-1"> # 1 (XS), #LAST (SM), # 1 (MD, LG і XL) < / div> <div class = "col-3 order-md-7"> # 2 (XS), # 7 (MD, LG і XL) </ div> <div class = "col-3 order-md-6 "> # 3 (XS), # 6 (MD, LG і XL) </ div> <div class =" col-3 order-md-5 "> # 4 (XS), № 5 (MD, LG і XL ) </ div> <div class = "col-3 order-md-4"> # 5 (XS), # 4 (MD, LG і XL) </ div> <div class = "col-3 order-md -3 "> # 6 (XS), # 3 (MD, LG і XL) </ div> <div class =" col-3 order-md-2 "> # 7 (XS), # 2 (MD, LG і XL) </ div> <div class = "col-3 order-sm-first order-md-8"> # 8 (XS), #FIRST (SM), # 8 (MD, LG і XL) </ div> </ div>

Приклад адаптивної верстки на сітці Boostrap 4

Створимо адаптивну розмітку блоку веб-сторінки, наведеного на малюнку, за допомогою сітки Bootstrap 4.

Bootstrap 4 - Приклад адаптивної розмітки блоку

1. Створюємо розмітку блоку для мобільних пристроїв (xs).

<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>

2. Налаштовуємо розмітку для контрольної точки sm:

<Div class = "row"> <div class = "col-12 col-sm-6"> (1) </ div> <div class = "col-12 col-sm-6"> (2) </ div> <div class = "col-12 col-sm-6"> (3) </ div> <div class = "col-12 col-sm-6"> (4) </ div> <div class = "col-12 col-sm-12"> (5) </ div> </ div>

3. Встановлюємо блокам кількість колонок, які вони повинні мати на пристроях md і lg:

<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> <div class =" col-12 col-sm-6 col-md-4 "> (3) </ div> <div class =" col-12 col-sm -6 col-md-6 "> (4) </ div> <div class =" col-12 col-sm-12 col-md-6 "> (5) </ div> </ div>

4. Створюємо розмітку для xl:

<Div class = "row"> <div class = "col-12 col-sm-6 col-md-4 col-xl"> (1) </ div> <div class = "col-12 col-sm- 6 col-md-4 col-xl "> (2) </ div> <div class =" col-12 col-sm-6 col-md-4 col-xl "> (3) </ div> <div class = "col-12 col-sm-6 col-md-6 col-xl"> (4) </ div> <div class = "col-12 col-sm-12 col-md-6 col-xl" > (5) </ div> </ div>

Прибираємо непотрібні контрольні точки у адаптивних блоків:

<Div class = "row"> <div class = "col-12 col-sm-6 col-md-4 col-xl"> (1) </ div> <div class = "col-12 col-sm- 6 col-md-4 col-xl "> (2) </ div> <div class =" col-12 col-sm-6 col-md-4 col-xl "> (3) </ div> <div class = "col-12 col-sm-6 col-xl"> (4) </ div> <div class = "col-sm-12 col-md-6 col-xl"> (5) </ div> </ div>

Крім цього, спочатку в Bootstrap 4 адаптивний блок має ширину, рівну 100%. Це дозволяє при створенні адаптивних блоків не вказувати кількість колонок, якщо їх первісна ширина повинна дорівнювати 12 колонок (100%).

<Div class = "row"> <div class = "col-sm-6 col-md-4 col-xl"> (1) </ div> <div class = "col-sm-6 col-md-4 col-xl "> (2) </ div> <div class =" col-sm-6 col-md-4 col-xl "> (3) </ div> <div class =" col-sm-6 col -xl "> (4) </ div> <div class =" col-md-6 col-xl "> (5) </ div> </ div>