ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
Bootstrap 5: преимущества и обновления
А вы слышали, что самый популярный среди веб-разработчиков фреймворк обновлен до новой версии и имеет еще больше полезных функций? В статье разбираемся, что такое Bootstrap и какие новые фишки внесли разработчики в 5 версию.
Веб-разработка
5729

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?


Перейдите на официальный сайт и на главной странице нажмите кнопку «скачать». Далее следуйте инструкции исходя из удобного для вас способа загрузки.



Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
Frontend-разработчик
Подробнее о курсе
Читайте другие статьи
Топ-7 Angular-библиотек для ваших Frontend-проектов
Зачем писать код с нуля, когда нужного результата можно достичь при помощи готовых библиотек? Если вы разрабатываете Frontend-проекты на фреймворке Angular, то наша подборка серьезно облегчит вам жизнь. Скорее добавляйте в закладки!
Веб-разработка
2044
Как оформить эффективную карточку товара
Узнайте, как превратить обычную товарную карточку в интернет-магазине или на маркетплейсе в эффективного продавца. Грамотное оформление таких карточек способно заметно повысить конверсию и доходность сайта или приложения для e-commerce.
Веб-разработка
1366
Почему разработчику не стоит перерабатывать?
Вы недавно устроились на работу, взялись за новый проект и так захвачены им, что трудитесь даже по вечерам или в выходные? Или вы задерживаетесь, чтобы произвести впечатление на начальство? Узнайте, почему это плохая идея в обоих случаях.
Веб-разработка
1569
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!