Bootstrap 4: что нового и отличие от Bootstrap 3

Совсем скоро выйдет стабильная версия Bootstrap 4, так как на момент написания статьи этап альфа-тестирования закончен, и доступна уже вторая бета-версия. Это означает, что в стабильную версию могут быть внесены какие-то небольшие доработки, а время кардинальных изменений закончено, можно начинать тестировать и использовать Bootstrap 4 в реальных проектах.

Официальный сайт фреймворка - getbootstrap.com

Прошло два года с выпуска первой альфа-версии четвертого бутстрапа, за это время были произведены тысячи коммитов и заменены десятки тысяч строк кода. Изменений и обновлений по сравнению с Bootstrap 3 произошло много. Давайте разберем, что нового появилось в четвертой версии фреймворка и в чем отличие Bootstrap 4 от Bootstrap 3.

Новая сетка, поддержка FlexBox и компонент card

В сетку добавлен еще один брейкпоинт col-xl-, при этом все остальные брейкпоинты остались, но сдвинулись на уровень ниже. Таким образом, самый маленький из них – col-xs-, в третьем бутстрапе срабатывал при ширине экрана 767px, а теперь срабатывает при 575px. Это позволяет точнее осуществлять адаптацию web-страниц под мобильные устройства. Стоит отметить, что в Bootstrap 4 постфикс -xs- не указывается и пишется просто col-?.

Брейкпоинты и размеры колонок сетки

Новая сетка стала более гибкой благодаря поддержке технологии «FlexBox». Например, часто бывает, что контент одного блока больше содержимого других блоков, стоящих в одну линию, на изображении ниже показано как ведут себя такие блоки при использовании обычного выравнивания «Float».

Блоки при использовании Float

Использование «FlexBox» позволяет делать все блоки одинаковой высоты, при этом нет необходимости в написании дополнительного CSS-кода.

Блоки при использовании FlexBox

Появился совершенно новый компонент «Card» (карточка), который заменяет удаленные: wells, thumbnails, panels. Это достаточно гибкий и мощный инструмент, включающий в себя возможности всех трех удаленных компонентов. Также карточки можно группировать и даже реализовать сетку, так называемую кирпичную кладку.

Сетка кирпичная кладка создана с помощью Card

Поддержка IE, переход на Sass, модуль Reboot, отказ от Glypicons и цвет элементов

Bootstrap 4 поддерживает IE 10 и выше, более ранние версии Internet Explorer не поддерживаются. Если необходима поддержка: IE8/IE9, Safari 8-, iOS 8- и т.д., то сами разработчики фреймворка рекомендуют использовать Bootstrap 3.

Произошел полный отказ от «Less», теперь компиляция исходников фреймворка производится только на «Sass», для ускорения компиляции используется «Libsass».

Для кроссбраузерности был разработан модуль «Reboot», включающий в себя ядро «Normalize.css» и расширяющий его. Все настройки для сброса стандартных стилей HTML-тегов у браузеров находятся в одном «Sass» файле.

В Bootstrap 4 был полностью удален иконочный шрифт «Glypicons», который присутствует в третьем бутстрапе. Разработчики фреймворка рекомендуют использовать сторонние библиотеки иконок поддерживающие формат SVG.

Стоит также отметить, что по сравнению с третьим бутстрапом, где было шесть основных классов для цветового оформления элементов, в четвертом бутстрапе таких классов стало восемь.

Классы для цветового оформления элементов

Другие изменения фреймворка

  • Пиксели (px) заменены на «em» и «rem».
  • Переписаны все JavaScript плагины под стандарты ECMAScript 6.
  • Обновлен дизайн всех компонентов (форм, таблиц, кнопок и т.д.).
  • Появилось гораздо больше служебных классов.
  • Улучшен функционал всплывающих подсказок и popover элементов.
  • Для Bootstrap 4 улучшена документация и разработан удобный поиск.

Конечно, изменений по сравнению с Bootstrap 3 было сделано очень много и все их невозможно разобрать в одном посте, я же постарался осветить все глобальные и наиболее интересные нововведения. В следующей статье подробно рассмотрим сетку Bootstrap 4.

Похожие записи:

Добавить комментарийОтменить ответ

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности