Bootstrap 3 и 4: какие отличия?

На этапе верстки всегда важно иметь под рукой хороший инструмент, который значительно ускорит процесс разработки, будет гибким, легко...

На этапе верстки всегда важно иметь под рукой хороший инструмент, который значительно ускорит процесс разработки, будет гибким, легко настраиваемым и позволит с легкостью создать макет. Он должен дать возможности легко создавать страницы, которые хорошо отображаются на десктопах и мобильных устройствах. Что же, нам повезло, ведь у нас есть 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, которые прижмут ваш элемент вправо или влево, соответственно.

Bootstrap 3 и 4: какие отличия

А как на счет колонок одинаковой ширины без указания явно обозначенных номеров классов? Очень легко! Внутри вашего row просто разместите столько div c классом col, сколько колонок одинаковой ширины вам нужно. Предположим, ваша сетка имеет следующий вид:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>

Результатом будет 3 колонки одинаковой ширины на абсолютно всех устройствах.

Bootstrap 3 и 4: какие отличия

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

Что же касается медиа запросов, то и здесь берет верх новая версия. Ведь теперь у нас есть возможность более гибко подойти к стилизации страницы на различных девайсах. А все потому, что теперь в системе сеток присутствуют следующие брейкпоинты:
extra large (>= 1200px)
large (>= 992px)
medium (>= 768px)
sm (>= 576px)
xs (< 576px)

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

Оцените (82 голосов - 4.7 из 5)
Спасибо!
1
(Ужасно)
2
(Плохо)
3
(Средне)
4
(Хорошо)
5
(Класс!)


Спасибо!