Bootstrap 5: преимущества и обновления
А вы слышали, что самый популярный среди веб-разработчиков фреймворк обновлен до новой версии и имеет еще больше полезных функций? В статье разбираемся, что такое Bootstrap и какие новые фишки внесли разработчики в 5 версию.
Веб-разработка
5729
2 апр. 2021
Bootstrap — это большая коллекция удобных фрагментов кода, написанных на HTML, CSS и JavaScript, которая позволяет разработчикам и дизайнерам быстро создавать полностью адаптивные веб-сайты.
Почему веб-разработчики любят Bootstrap?
- Bootstrap ускоряет процесс верстки сайтов благодаря большому количеству готовых компонентов.
- Фреймворк позволяет настраивать размеры блоков сайта в зависимости от ширины устройства как для компьютера, так и для телефона.
- Bootstrap очень популярен среди разработчиков, поэтому в интернете существует большое количество статей и уроков, а также форумов.
- Bootstrap можно использовать для создания сайтов с различными CMS — WordPress, Joomla, Opencart.
История важных обновлений
Bootstrap был создан бывшими сотрудниками Twitter Марком Отто и Джейкобом Торнтоном в 2011 году. За 8 лет существования было выпущено 5 версий с нововведениями:
- 31 января 2012 года в Bootstrap появилась 12-колоночная сетка и поддержка адаптивности;
- Версия от 19 августа 2013 года получила дальнейшее развитие адаптивности. Был осуществлён переход к концепции mobile first — оптимизации прежде всего под мобильные устройства;
- 18 января 2018 года выпущена первая стабильная версия Bootstrap 4, которой предшествовали 2 бета-версии;
- 16 июня 2020 года разработчики выпустили новейшую версию Bootstrap альфа 5.
Что нового в 5 версии?
Отказ от jQuery в пользу классического JS
Сегодня сообщество веб-разработчиков чаще используют такие фреймворки, как Angular, Vue и React, поэтому разработчики Bootstrap 5 решили сделать переход с jQuery на Vanilla JavaScript.
Отключена поддержка браузера Internet Explorer версий 10 и 11
Команда Bootstrap решила отказаться от поддержки Internet Explorer 10 и 11, что является хорошим шагом, поскольку это позволит веб-дизайнерам и разработчикам больше сосредоточиться на разработке современных веб-страниц, не беспокоясь о том, что можно повредить какой-либо фрагмент кода или увеличить размер проекта.
Добавлена библиотека пользовательских иконок SVG
Марк Отто создал и внедрил в 5-ю версию Bootstrap новую библиотеку иконок с поддержкой SVG.
Переход от Jekyll на Hugo
Jekyll — это бесплатный генератор статических сайтов с открытым исходным кодом. Jekyll используется для создания веб-сайтов с простой в использовании навигацией, компонентами веб-сайтов и генерирует весь контент сразу. Bootstrap 4 был отличным инструментом для интеграции с Jekyll через Sass (Syntactically Awesome Style Sheets), но в Bootstrap 5 ожидается переход с Jekyll на Hugo.
Hugo описывается как «быстрый и гибкий генератор статических сайтов, созданный на GoLang». Возможная причина перехода в том, что Hugo прост в использовании. По сравнению с Jekyll, он имеет отличную интеграцию с популярным веб-хостингом и может организовать ваш контент с любой структурой URL-адресов.
Обновление классов
Из Bootstrap 5 будут удалены некоторые CSS-классы и добавлены новые. Согласно официальным данным из Bootstrap 5 уже удалены классы:
- form-row
- form-inline
- list-inline
- card-deck
Список добавленных классов:
- gx*- пространство между ячейками по горизонтали
- gy*- пространство между ячейками по вертикали
- g*- пространство между ячейками по горизонтали и вертикали
- row-cols-auto - автоматическое распределение колонок сетки
Адаптивные шрифты
Bootstrap 5 по умолчанию включает адаптивные размеры шрифтов, которые автоматически изменяют размер элемента типографики в соответствии с размером области просмотра пользователя с помощью механизма RFS (механизма изменения размера единиц).
RFS предлагает возможность изменять размер практически любого значения для любого свойства CSS с такими единицами измерения, как margin, padding, border-radius или box-shadow.
Добавлен новый контейнер
Контейнеры используются для размещения в них содержимого, дополнений и центрирования содержимого внутри них.
Bootstrap использует 3 разных типа контейнеров:
- container, который устанавливает максимальную ширину max-width в каждой отзывчивой контрольной точке;
- container-fluid, ширина которого width: 100% на всех контрольных точках;
- container-{breakpoint}, то есть ширина width: 100% до указанной контрольной точки.
В 5 версии добавился еще один размер контейнера. Теперь у пользователей с шириной экрана больше 1400px будет контейнер на 1320px.
Как начать работу с Bootstrap?
Перейдите на официальный сайт и на главной странице нажмите кнопку «скачать». Далее следуйте инструкции исходя из удобного для вас способа загрузки.
Читайте другие статьи
Топ-7 Angular-библиотек для ваших Frontend-проектов
Зачем писать код с нуля, когда нужного результата можно достичь при помощи готовых библиотек? Если вы разрабатываете Frontend-проекты на фреймворке Angular, то наша подборка серьезно облегчит вам жизнь. Скорее добавляйте в закладки!
Веб-разработка
2044
28 марта 2023
Как оформить эффективную карточку товара
Узнайте, как превратить обычную товарную карточку в интернет-магазине или на маркетплейсе в эффективного продавца. Грамотное оформление таких карточек способно заметно повысить конверсию и доходность сайта или приложения для e-commerce.
Веб-разработка
1366
31 янв. 2023
Почему разработчику не стоит перерабатывать?
Вы недавно устроились на работу, взялись за новый проект и так захвачены им, что трудитесь даже по вечерам или в выходные? Или вы задерживаетесь, чтобы произвести впечатление на начальство? Узнайте, почему это плохая идея в обоих случаях.
Веб-разработка
1569
25 окт. 2022
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Никакого спама. Только ценные и полезные статьи для вас!