// Кодирование

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, которые прижмут ваш элемент вправо или влево, соответственно. Bootstrap 3 и 4: какие отличия А как на счет колонок одинаковой ширины без указания явно обозначенных номеров классов? Очень легко! Внутри вашего row просто разместите столько div c классом col, сколько колонок одинаковой ширины вам нужно. Предположим, ваша сетка имеет следующий вид:


1

2

3


Результатом будет 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!

Отзывы наших клиентов

Разработка экосистемы, предназначенной для предоставления разнообразных услуг цифровым активам под одной оболочкой на основе технологии блокчейна

Есть вопросы? Задайте их здесь

Имя *
Email *
Телефон
Ваш бюджет
Сообщение
 

С 2015 года помогаем клиентам реализовывать идеи!

Подпишитесь на свежие статьи