На етапі верстки завжди важливо мати під рукою хороший інструмент, який значно прискорить процес розробки, буде гнучким, легко настроюється і дозволить з легкістю створити макет. Він повинен дати можливості легко створювати сторінки, які добре відображаються на десктопах і мобільних пристроях. Що ж, нам пощастило, адже у нас є Bootstrap. Ось тільки на даний момент існує 2 актуальні версії - Bootstrap 3 і Bootstrap 4. У чому ж різниця і скільки разів використовувати? Це ми зараз і з'ясуємо. Англійську версія статті bootstrap 3 vs 4 .

Обидві версії є потужний CSS-фреймворк для створення адаптивних сторінок, який включає себе:
-многоколоночную адаптивну сітку;
-Готові елементи за типом навігації, кнопок, дропдаунов і т.д;
-Набір службових класів для управління поведінкою елементів;
-reset або normalize;
-Настройка друкарні в шаблоні;
-медіаоб'екти;
-деякі JS-плагіни (Carousel, Modal і так далі);
-і багато іншого.

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

Перше, що кидається в очі, це те, що вихідний код Bootstrap 4 написаний не на Less, а на Sass. І це величезний плюс, як на мене. Адже не дарма Sass визнаний самим використовуваним СSS-препроцесором (особисто для мене код, написаний на ньому, більш читаємо і зрозумілий, та й функціонал трохи виграє у конкурентів).

Також варто відзначити, що сітка Bootstrap 3 побудована тільки на float'aх, в той час як Bootstap 4 пропонує нам вибрати між float ... .і Flexbox! Так, це сталося. Уявіть собі, що в 4-ій версії у вас відпадає проблема вирівнювання по вертикалі і проблема колонок однакової висоти. Це лише мізер, який може нам запропонувати розмітка, побудована на Flexbox'ах.

Змінюйте вертикальне і горизонтальне вирівнювання на різних девайсах з допомогою службових утиліт і класів, таких як: align-item-center, align-items-md-center, align-items-lg-start і так далі. Міняйте порядок ваших колонок, використовуючи flex-unordered, flex-last, flex-first! Використовуйте mr-auto, ml-auto, які притиснуть ваш елемент вправо або вліво, відповідно.

А як на рахунок колонок однакової ширини без вказівки явно позначених номерів класів? Дуже легко! Всередині вашого row просто розмістіть стільки div c класом col, скільки колонок однакової ширини вам потрібно. Припустимо, ваша сітка має наступний вигляд:

<Div class = "row">

<Div class = "col"> 1 </ div>

<Div class = "col"> 2 </ div>

<Div class = "col"> 3 </ div>

</ Div>

Результатом буде 3 колонки однакової ширини на всіх пристроях.

Такої можливості в третій версії не було. Вражає, чи не так? Крім цього є можливість створення колонок, що змінюють свою ширину по ширині вмісту. Для цього потрібно скористатися наступним класом - col-md-auto (замість md підставити потрібний брейкпоінт).

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

extra large (> = 1200px)

large (> = 992px)

medium (> = 768px)

sm (> = 576px)

xs (

У bootstrap 3 цих брейкпоинтов було всього 4 і це часом створювало деякі проблеми при розмітці на маленьких планшетах і телефонах з величезним екраном.

Варто зазначити, що не всі елементи в Bootstrap 4 мають властивість display: flex. Якщо є необхідність зробити елемент flex, то слід скористатися утилітою display. Наприклад, додати клас .d-flex, .d-inline-flex, або ж .d-sm-flex, коли потрібно застосувати утиліту тільки для девайсів категорії sm і вище. Для елемента з класом .d-flex існує свій набір flex-утиліт, за допомогою яких можна змінювати вісь контейнера, змінювати порядок на зворотний, вирівнювати елементи всередині контейнера і т.д. . До них належать: flex-row, flex-row-reverse, .flex-column, .flex-column-reverse, .flex-sm-row, .justify-content-start, .justify-content-start, .justify- content-sm-start та інші варіації на основі всіх властивостей.

Що ж, я привів лише основні відмінності і в дуже короткій формі. Але їх набагато більше: чого варто тільки розділ друкарні з поліпшеною системою відступів для різних елементів (p, ul і т.д). Щоб повністю ознайомитися з усіма нововведеннями, я раджу відкрити офіційну документацію, за допомогою якої ви тут же знайдете відповіді на всі ваші запитання. Після цього качайте Bootstrap 4 собі і пробуйте на особистому досвіді. Можливо ви запитаєте: а як же підтримка Flexbox браузерами? Я можу використовувати нову версію фреймворку в продакшені? І відповідь - звичайно ж так! Підтримка чудова, всі сучасні браузери підтримують дану технологію, тільки не варто забувати про Вендорний префіксах. Bootstrap 4 добре підходить для розробки як маленьких сайтів, так і великих кріптовалютних бірж .

Підводячи підсумок, можна сказати, що 4-а версія набагато випереджає попередника. Саме її я раджу використовувати на ваших проектах, адже дуже важливо йти в ногу з часом і при розробці вашого продукту використовувати тільки нові, якісні та актуальні інструменти. На даний момент Bootstrap 4 перейшов в стадію бета-тестування, а офіційний реліз заплановано на 2018 рік. Чекаємо з нетерпінням! Створюйте сучасні і адаптивні макети разом з Bootstrap!