Обновление получилось масштабным

Команда Bootstrap анонсировала  выход новой версии и рассказала о нововведениях фреймворка.

По словам разработчиков, на пути к релизу Bootstrap 5 прошёл через три альфа- и бета-версии, а также несколько месяцев интенсивной разработки. Не забыли они при этом поблагодарить мейнтейнеров и сообщество — за оказанную помощь.

В пятой версии Bootstrap появилось много интересных нововведений. Рассмотрим подробнее основные.

Новый логотип

В блоге компании написано, что одним из «крупнейших» изменений оказался редизайн логотипа. Команда сама неплохо сыронизировала по поводу этого, поместив именно это нововведение на первое место.

Новый компонент offcanvas

Одно из больших новых дополнений к компонентам — это совершенно новый offcanvas! Offcanvas поставляется с настраиваемым фоном, body scroll и размещением. Компоненты Offcanvas можно размещать сверху, справа, снизу или слева от области просмотра. Настройте эти параметры с помощью data- атрибутов или API JavaScript.

Новый аккордеон

Новый компонент включает значки Bootstrap в виде шевронных значков, обозначающих состояние и возможность нажатия. Команда Bootstrap включила поддержку плоского аккордеона (добавить .accordion-flush) для удаления внешних границ, что упрощает размещение внутри родительских элементов.

Новые и обновленные формы

Разработчики объединили все стили форм в новый раздел форм (включая компонент input group), чтобы придать им тот акцент, которого они заслуживают. Наряду с новыми docs pages были переработаны и все элементы управления формами. Благодаря единому набору элементов управления формой и сосредоточению внимания на переработке существующих элементов вместо создания новых с помощью псевдоэлементов, получился гораздо более последовательный внешний вид.

Каждый checkbox, radio, select, file, range и другие включает настраиваемый внешний вид для унификации стиля и поведения элементов управления формы в ОС и браузере. Все эти новые элементы управления формы построены на полностью семантических стандартных элементах управления формой — больше нет лишней разметки, только элементы управления формы и метки.

Капитальное обновление утилит

  • Внедрен новый служебный API в качестве основного способа расширения служебных классов Bootstrap по умолчанию.
  • Добавлен ряд новых утилит.
  • Добавлены логические свойства утилит.

Новые сниппеты

Добавлено четыре новых примера с большим количеством фрагментов и обновлено несколько других примеров.

Эти новые сниппеты содержат несколько вариантов общих компонентов, которые подаются по-разному, чтобы можно было легко воспользоваться ими.

Сетка и макет (grid & layout)

В систему сеток и параметры макета были внесены некоторые изменения, упрощающие работу. Также обновлена   документация по макету: длинные страницы разбиты на более узкие темы.

Поддержка браузеров

В этом обновлении разработчики Bootstrap наконец-то отказались от поддержки множества старых браузеров:

  • Microsoft Edge Legacy
  • Internet Explorer 10 and 11
  • Firefox < 60
  • Safari < 10
  • iOS Safari < 10
  • Chrome < 60
  • Android < 6

JavaScript

Самым большим изменением в JavaScript стал отказ от привязки к jQuery, что позволило сэкономить 85Кб исходных файлов, плюс несколько других улучшений:

  • Все плагины теперь могут принимать селектор CSS в качестве первого аргумента.
  • Обновлено до Popper 2!
  • Атрибуты данных для всех плагинов JavaScript теперь имеют пространство имен с bs. Например, используем data-bs-toggle вместо data-toggle.
  • Полностью переработали размещение раскрывающихся списков, всплывающих окон и всплывающих подсказок с появлением Popper v2.
  • Добавлена ​​возможность использовать настраиваемые классы для всплывающих подсказок и всплывающих окон.
  • И ряд других…

Новые релизы не за горами

Пока мы тестируем новый Bootstrap 5 команда разработчиков уже трудится над релизами Bootstrap v4.6.1, Bootstrap Icons v1.5.0 и Bootstrap v5.1.0.