Написать нам
Категория: Кодирование
10.12.2019

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

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


Вот только на данный момент существует 2 актуальные версии - Bootstrap 3 и Bootstrap 4. В чем же разница и какую версию использовать ? Это мы сейчас и выясним. Английскую версия статьи bootstrap 3 vs 4. Обе версии представляют собой мощный CSS-фреймворк для создания адаптивных страниц, который включает себя:



  1. многоколоночную адаптивную сетку;

  2. готовые элементы по типу навигации, кнопок, дропдаунов и т.д;

  3. набор служебных классов для управления поведением элементов;

  4. reset или normalize;

  5. настройки типографии в шаблоне;

  6. медиаобъекты;

  7. некоторые JS-плагины (Carousel, Modal и так далее);

  8. и многое другое.


Но, несмотря на практически идентичный набор компонентов и утилит, существуют огромные различия.



Первое, что бросается в глаза, это то, что исходный код Bootstrap 4 написан не на Less, а на Sass. И это огромный плюс, как по мне. Ведь не зря Sass признан самым используемым СSS-препроцессором в2020 (лично для меня код, написанный на нем, более читаем и понятен, да и функционал немного выигрывает у конкурентов).


Также стоит отметить, что сетка 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, сколько колонок одинаковой ширины вам нужно. Предположим, ваша сетка имеет следующий вид:




1



2



3



Результатом будет 3 колонки одинаковой ширины на абсолютно всех устройствах. Такой возможности в третьей версии не было. Впечатляет, не так ли? Кроме этого есть возможность создания колонок, изменяющих свою ширину по ширине содержимого. Для этого нужно воспользоваться следующим классом - 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-ая версия гораздо опережает предшественника. Именно её я советую использовать на ваших проектах, ведь очень важно идти в ногу со временем и при разработке вашего продукта использовать только новейшие, качественные и актуальные инструменты.


Написать нам
Имя*:
Email*:
Сообщение: