Bootstrap 3 -> 4 -> 5 -> 6

Bootstrap — это популярный фреймворк для создания адаптивных веб-сайтов и интерфейсов. С момента выхода третьей версии (Bootstrap 3) было внесено множество изменений, улучшений и нововведений. Рассмотрим основные изменения, начиная с Bootstrap 3 и далее.

1. Bootstrap 3 (2013 год)

Bootstrap 3 стал значительным обновлением по сравнению с предыдущими версиями. Основные новшества:

• Мобильная ориентация (Mobile-first approach):
• В Bootstrap 3 была внедрена концепция «mobile-first», что означает, что стили изначально создаются для мобильных устройств, а затем расширяются для больших экранов.
• Была убрана поддержка Internet Explorer 7 и ниже.
• Грид-система:
• Полностью переработана грид-система. Теперь она стала более гибкой и основана на 12 колонках.
• Добавлены новые классы для контроля макета на разных устройствах: col-xs-*, col-sm-*, col-md-*, col-lg-*.
• Удаление LESS в пользу Sass:
• Хотя Bootstrap 3 продолжал использовать LESS, в последующих версиях он был заменён на Sass.
• Компоненты:
• Упрощены и унифицированы компоненты, такие как кнопки, навигационные панели и модальные окна.
• Добавлены новые компоненты, например, карусель (carousel) и панели (panel).
• Шрифты:
• Использование шрифта Glyphicons для иконок стало стандартным.

2. Bootstrap 4 (2018 год)

Bootstrap 4 принёс ещё больше изменений и улучшений. Основные нововведения:

• Переход на Flexbox:
• Грид-система была полностью переписана с использованием Flexbox, что сделало её более мощной и гибкой.
• Появились новые классы для выравнивания элементов, таких как justify-content-*, align-items-* и другие.
• Поддержка новых точек останова (breakpoints):
• Добавлен новый размер экрана xl (extra large), что увеличило количество доступных точек останова до пяти: xs, sm, md, lg, xl.
• Переход на Sass:
• Bootstrap полностью перешёл с LESS на Sass, что упростило кастомизацию и интеграцию.
• Изменение единиц измерения:
• Вместо пикселей (px) для многих свойств стали использоваться относительные единицы, такие как rem.
• Новые компоненты:
• Добавлены новые компоненты, такие как карточки (cards), которые заменили старые панели (panels), wells и thumbnails.
• Улучшены модальные окна, выпадающие списки и навигационные меню.
• Удаление Glyphicons:
• Поддержка Glyphicons была удалена. Вместо этого рекомендуется использовать сторонние библиотеки, такие как Font Awesome или SVG-иконки.
• Улучшенная поддержка форм:
• Добавлены новые классы для управления формами, такие как form-control-lg и form-control-sm.
• Reboot:
• Вместо Normalize.css был добавлен собственный CSS-файл reboot.css, который предоставляет базовые стили для всех элементов.

3. Bootstrap 5 (2021 год)

Bootstrap 5 стал ещё более современным и универсальным. Вот основные изменения:

• Удаление jQuery:
• Bootstrap 5 полностью отказался от зависимости на jQuery. Все компоненты теперь используют чистый JavaScript.
• Новый breakpoint xxl:
• Добавлена новая точка останова xxl (extra extra large), что увеличило количество точек останова до шести: xs, sm, md, lg, xl, xxl.
• Улучшенная грид-система:
• Добавлена возможность использования горизонтальных гридов с помощью классов row-cols-*.
• Новые компоненты:
• Добавлены новые компоненты, такие как офканвас-меню (offcanvas), аккордеоны (accordion) и тосты (toasts).
• Улучшенная темизация:
• Добавлена поддержка CSS-переменных, что упростило создание тем и кастомизацию.
• Dark mode:
• Встроена поддержка темного режима через класс dark-mode.
• Улучшенная типографика:
• Добавлены новые классы для управления текстом, такие как .text-break, .text-decoration-* и .fs-* (размер шрифта).
• Обновление форм:
• Формы стали более удобными и доступными. Например, добавлены новые классы для управления состоянием полей ввода.
• Улучшенная документация:
• Документация стала более подробной и удобной для использования.

4. Bootstrap 6 (планируемое будущее)

На момент октября 2023 года Bootstrap 6 находится в разработке. Ожидается, что он принесёт следующие изменения:

• Переход на более современные технологии, такие как Web Components.
• Улучшение производительности и оптимизации.
• Дальнейшее развитие темизации и поддержки CSS-переменных.
• Возможное добавление новых компонентов и улучшение существующих.

Заключение

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

Если вы хотите углубиться в конкретную версию или функциональность, дайте знать! 😊