Друзья, всем привет! В этой статье мы рассмотрим новую версию самого популярного фреймворка для создания UI интерфейсов Bootstrap 5! В пятой версии появилось огромное количество обновлений и нововведений. Готовы? Тогда поехали =)
Что нового?
Начнем с того, что bootstrap существует на рынке уже более 8 лет и является самым популярным css фреймворком и обслуживает более 18 млн сайтов по всему миру! Более того, это число растет и огромное количество веб-разработчиков использует bootstrap для создания гармоничных UI интерфейсов.
1. Отказ от JQuery и переход на нативный JavaScript =)
Да да, вы не ослышались =) старушка JQuery уже отжила свое и отправилась на пенсию) Сейчас выходят в лидеры фреймворки, 2 - е три кита front-end разработки - Angular, ReactJS и Vue(а если ты новичок и не знаешь какой из них выбрать, то советую почитать мою статью, где я подробно рассказываю о каждом из них - https://zen.yandex.ru/media/id/5f069c01dc622742dfd4a1ba/angular-react-ili-vue-5f06a1d0706db30f86ec3ac5 ). Их преимущество в том, что они работают через виртуальный DOM, а не как jQuery. Это приводит к более высокой производительности. Отказ от jQuery , одно из самых больших обновлений за последние годы.
2. Отказ от IE10&11
Благо на "всеми любимый" браузер InternetExplorer приходится всего 1% пользователей по всему миру. Что говорить... Microsoft сами прекратили поддержку более старых версий этого браузера. В далекие 2000 - е этот браузер был лидером на рынке и на его использование приходилось 95% пользователей. Когда - то и такое было =) но только не сейчас..
3. Добавление css-variables(переменных)
За счет отказа от EI, Bootstarp начали активное использование css переменных. В предыдущей версии это тоже было, но только как эксперимент. Сейчас все полноценно =)
4. Переработана система сетки.
Добавились классы - xxl, extra extra large для разрешения экранов в более 1400px. Остальные брекпоинты остались такими же как в Bootstrap 4.
5. 250 иконок пользовательских иконок svg
Еще одно важной нововведение, это библиотека пользовательских иконок svg. Теперь вы сможете спокойно использовать их в своих проектах, а не подгружать со сторонних ресурсов таких как font awesome.
6. Отказ от card decks
Теперь данный интерфейс может быть реализован с помощью сетки. Просто добавляем нужный класс и готово =)
7. Обновление классов
Некоторые классы удалены, некоторые классы добавились и стало более комфортнее с ними работать. Удаленные классы:
- form-row
- form-inline
- list-inline
- card-deck
Добавленные:
- row-cols-auto
- gx-* управляет горизонтальной шириной отступа колонны
- gy-* управляет вертикальной шириной отступа колонны
- g-* управляет вертикальной и горизонтальной шириной отступов
Заключение
Подведем итоги. В первую очередь хочется сказать что Bootstrap 5 стал быстрее, оптимизированее и удобнее для создания пользовательских интерфейсов и веб-сайтов. Конечно не стоило ожидать изменений в наборе классов базовых компонентов. Т к они показали себя и проверены годами.
На этом у меня все, подписывайтесь на канал, оставляйте комментарии, задавайте свои вопросы, с удовольствием на них отвечу =) Рад всем Вам и Вашей обратной связи! Beloussovvv