Bootstrap 5: самые важные обновления

Bootstrap — один из самых любимых фреймворков для разработки фронтенда веб-сайтов. Этот инструмент позволяет разработчикам создавать шаблоны на CSS и HTML для облегчения современного веб-дизайна. Макеты, шрифты, кнопки и различные навигационные элементы позволяют быстро и просто разрабатывать и размещать их.

Первоначально разработанный для Twitter, фреймворк доступен бесплатно как проект с открытым исходным кодом. Bootstrap 5 — это последнее обновление альфа-версии.

По состоянию на 16 июня^{16 июня} 2020 года Bootstrap 5 был доступен в виде экспериментальной альфа-версии. Многие из запланированных изменений уже реализованы, но полная разработка еще не завершена. В то же время были обнародованы патчи для четвертой версии фреймворка. Расписание релизов пока не известно. Поэтому не совсем ясно, когда будет готова к использованию первая бета-версия или финальная версия. Если ориентироваться на сроки предшественника, то ждать придется долго: между выпуском альфа-версии и финальной версией Bootstrap 4 прошло 2,5 года.

Команда разработчиков Bootstrap объявила о сотнях изменений в последнем обновлении версии. Многие из них являются небольшими изменениями в процессе разработки, но есть и несколько более значительных обновлений, которые будут важны для разработчиков, использующих фреймворк с открытым исходным кодом.

Хотя поддержка Microsoft Internet Explorer уже давно прекращена, некоторые пользователи все еще держатся за этот браузер. Количество пользователей сократилось настолько, что Bootstrap 5 больше не поддерживает его. Поскольку Internet Explorer уже устарел и больше не разрабатывается Microsoft в пользу Edge, разработчикам приходилось добавлять много ненужного кода в прошлом.

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

Чтобы облегчить работу с JavaScript, многие веб-дизайнеры и разработчики используют бесплатную библиотеку jQuery. Bootstrap долгое время поддерживал jQuery. Но в последнем обновлении поддержка jQuery прекращена, поскольку пользователи Bootstrap 5 больше не зависят от этой библиотеки. Даже без jQuery можно легко и быстро создавать фреймворки, используя расширенный код JavaScript, HTML или альтернативные CSS.

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

Поскольку Internet Explorer больше не поддерживается, Bootstrap 5 ориентирован на современные методы веб-дизайна. Это включает в себя CSS Custom Properties, известные по Sass und Less, но также и по классическому CSS. Свойства (часто называемые переменными) упрощают использование CSS. Современные макеты могут быть более легко сгенерированы таким образом.

Начиная с четвертой версии фронтенд-фреймворка, макеты можно было создавать с помощью CSS Grids. Bootstrap 5 сохранил и даже расширил поддержку сеток. С появлением xxl команда добавила еще одну единицу размера. Были запущены дополнительные классы для вертикальных интервалов.

До сих пор Bootstrap был тесно связан с генератором статических сайтов Jekyll. Однако этот инструмент имеет тот недостаток, что для его использования необходимо предварительно установить конструктор Ruby. Поэтому команда разработчиков решила перейти на Hugo, который основан на современном языке Go и не требует установки дополнительных программ, работающих в фоновом режиме. Кроме того, Hugo обещает быть быстрее своих конкурентов.

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

Быстро развивающийся проект Bootstrap требует надлежащей документации. Только так новые пользователи, а также опытные дизайнеры Bootstrap смогут полностью освоить фреймворк. Именно поэтому обновление включает в себя более подробную документацию. Добавлена область Customize, объясняющая, как можно самостоятельно расширить Bootstrap. Была добавлена новая цветовая палитра, которая предоставляет больше возможностей для дизайна непосредственно в кодовой базе.

Bootstrap Forms также был обновлен. Теперь информацию о том, как создавать формы, можно найти гораздо быстрее. В этом контексте последняя версия содержит множество инноваций: Bootstrap 5 позволяет пользователям гибко проектировать элементы управления (кнопки, поля, радиопереключатели и т.д.).

В настоящее время не все запланированные изменения включены в альфа-версию. Создатели уже объявили о нескольких революционных дополнительных изменениях, которые будут реализованы в следующих релизах:

• Право-лево (RTL): Языки, читаемые справа налево, получат дополнительную поддержку.
• Меню Offcanvas: Offcanvas предоставляет дополнительные возможности для разработки меню.
• SVG в HTML: Данные SVG в настоящее время интегрируются через CSS, но в ближайших обновлениях версии будут поддерживаться кодом HMTL.