Bootstrap 5 что нового

Bootstrap 5 что нового

Bootstrap 5: преимущества и обновления

А вы слышали, что самый популярный среди веб-разработчиков фреймворк обновлен до новой версии и имеет еще больше полезных функций? В статье разбираемся, что такое Bootstrap и какие новые фишки внесли разработчики в 5 версию.

Веб-разработка
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-, то есть ширина width: 100% до указанной контрольной точки.

Как начать работу с Bootstrap?

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

Что нового в Бутстрапе 5

Когда мы собирали учебные проекты на Бутстрапе, то использовали четвёртую версию — актуальную на тот момент. С тех пор вышла пятая версия — мы собрали самое интересное, что там появилось по сравнению с четвёртой.

�� Вот коротко про Бутстрап:

• Бутстрап (Bootstrap) — это фреймворк для создания сайтов.
• Можно представить, что фреймворк — это конструктор: набор готовых компонентов и правил, из которых сайт собрать быстрее, чем написать с нуля.
• Главное, за что любят Бутстрап, — простота и адаптивность. На нём можно сделать сайт, который будет выглядеть одинаково хорошо и на компьютере, и на телефоне.
• Бутстрап — бесплатный фреймворк, который подключается к странице одной строчкой кода:

Боковые навигационные панели

Offcanvas — это панель, которая выезжает слева или справа. На ней можно разместить любой дополнительный контент: боковое меню, панель инструментов, подсказки, базу знаний или даже сверстать отдельную страницу.

Работает панель так: вы объявляете класс offcanvas и внутри этого блока верстаете всё, что нужно. Потом привязываете появление панели к любому инструменту на сайте, чтобы она выезжала при нажатии:

Аккордеон (схлопывающееся меню)

Аккордеон — популярный приём для организации ответов на вопросы. Идея простая: заранее пишем в каждой карточке название и описание, а потом используем аккордеон для наведения порядка. Раньше это в Бутстрапе работало с ошибками, и приходилось сильно переделывать код, а сейчас всё хорошо:

Ещё можно настроить так, чтобы карточки не сворачивались, а оставались все открытыми:

Формы

Задача формы на странице — собрать от пользователя какую-то информацию: электронную почту, телефон и т. д.

Стандартными средствами HTML нарисовать нормальную форму сложно: нужно самому продумывать дизайн, расположение элементов и их реакцию на разные действия пользователя.

В новой версии Бутстрапа все компоненты форм привели к единому стилю, чтобы они вместе выглядели однородно. Ещё там подтянули стандартные возможности многих компонентов — автоскрытие и предложение сохранения пароля, проверку адресов, чисел и телефонов, встроили адаптивность и выпадающие меню:

Чекбоксы и переключатели

Кроме стандартных галочек и радиокнопок, в пятом Бутстрапе появились красивые переключатели, как в телефонах. Они сразу показывают, установлен тот или иной параметр или нет.

Плюс ещё в том, что если открыть такой сайт в очень старом браузере, то там пользователь вместо переключателей увидит обычные чекбоксы. Будет не так красиво, зато всё будет работать как нужно.

Плавающие подсказки в полях ввода

Смысл плавающей подсказки — рассказать пользователю, что нужно написать в этом поле ввода, а когда он поставит туда курсор — сразу уйти наверх, чтобы не мешать. Раньше приходилось это настраивать отдельно через кастомный CSS, теперь всё гораздо проще.

Вот как это работает:

Дизайн и палитра

Здесь всё просто: немного поправили типографику и вёрстку, чуть поменяли отступы и визуальное взаимодействие элементов, как это принято в современном вебе.

А ещё разработчики обновили палитру цветов. Теперь можно указывать насыщенность конкретного цвета вместо его шестнадцатеричного значения, например:

$red-100 ← самый бледный красный

$red-900 ← самый насыщенный красный

Отказ от jQuery

Раньше под капотом Бутстрапа было много jQuery-кода — с его помощью фреймворк получал контроль над разными элементами на странице. Пользователю достаточно было указать, например, количество отступов в текущей колонке или поведение элементов в мобильной версии, а Бутстрап через jQuery делал всю остальную работу.

Сейчас вместо jQuery в Бутстрапе используют чистый JavaScript. Время прошло, JavaScript научился делать всё то, ради чего создавали jQuery: получать доступ к элементам, на лету создавать разные компоненты и быстро делать разные простые штуки. Поэтому теперь Бутстрап будет работать чуть быстрее и не тратить время на подгрузку дополнительной библиотеки.

Зачем это всё?

Весь смысл таких обновлений — подтянуть дизайн и возможности фреймворка, чтобы он выглядел современно и свежо. То, что было визуально хорошо пять лет назад, сейчас уже устарело, поэтому ребята молодцы, что обновляют свой продукт.

В следующий раз попробуем применить всё это на практике — обновим текущий сайт с котиками и посмотрим на него в новом дизайне.

Веб-разработка — это новый чёрный

На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.

Получите ИТ-профессию

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

Вышел Bootstrap 5: оцениваем 7 главных нововведений

Пройдя через несколько альфа- и бета-версий, наконец-то появился Bootstrap 5, на что у разработчиков ушло несколько месяцев. Новая версия претерпела серьезные изменения, включая отказ от поддержки Internet Explorer (IE) и зависимости jQuery. От IE было решено отказаться, потому что браузер занимает всего 3% рынка и его доля продолжает снижаться.

Что такое Bootstrap? Это самый популярный в мире CSS-фреймворк с открытым исходным кодом, который разработан командой Twitter. В v5 внесено сразу несколько критически важных изменений, давайте посмотрим, что там и как.

1. Отказ от jQuery

Больше Bootstrap не поддерживает библиотеку jQuery. Вместо этого команда разработчиков улучшила поддержку библиотеки JavaScript.

В целом, зависимость от jQuery не была в Bootstrap чем-то плохим. Наоборот, появление jQuery радикально изменило способ использования JavaScript. Это упростило написание задач на JavaScript, которые в противном случае требовали бы много строк кода.

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

Исходный файл уменьшился на 85 КБ, что очень важно, ведь Google считает фактор времени загрузки страницы для мобильных и веб-сайтов критическим.

При необходимости jQuery все равно можно использовать. Все плагины JavaScript при этом остаются доступными.

2. Настраиваемые свойства CSS

От Internet Explorer отказались, а значит, теперь разработчики могут использовать настраиваемые свойства CSS, как хотят и когда хотят. Проблема IE была в том, что он не поддерживает кастомные CSS.

Соответственно, CSS custom properties делают CSS более гибким и программируемым. Для того, чтобы предотвратить появление конфликтов со сторонними CSS, используется префикс -bs.

Всего доступно два типа переменных: корневые и компонентные. Что касается первого класса, то доступ к ним можно получить везде, где загружен Bootstrap CSS. Эти переменные находятся в файле root.scss и являются частью скомпилированных файлов dist. Что касается второго класса, то эти переменные локальны в отдельных компонентах. Они помогают избежать случайного наследования стилей в таких компонентах, как вложенные таблицы.

3. Улучшенная система сеток (Grid)

Поскольку при переходе с 3 на 4 версию возникли некоторые проблемы, v5 сохраняет большую часть системы сеток, а не обновляет ее полностью. Вот некоторые изменения:

• Вместо gutter ввели новые классы g* для указания отступов между ячейками.
• Также были включены классы вертикального интервала.
• У столбцов больше нет дефолтного значения position: relative.

4. Улучшенная документация

Разработчики добавили больше информации о фреймворке, в особенности о его настройке. У пятой версии улучшенный внешний вид и усовершенствованная настройка. Вероятно, по сайту, где используется Bootstrap 5, не так легко будет определить, что он применяет эту технологию.

Разработчики добавили больше гибкости в настройку тем, чтобы сайты не были похожими друг на друга. Тему четвертой версии доработали, добавили контент и фрагменты кода для разработки поверх Sass (популярный препроцессор CSS). Пример стартового npm-проекта можно найти на Github.

Расширена и цветовая палитра, пользоваться которой теперь проще. Проделана дополнительная работа по улучшению цветового контраста.

5. Управление формой

Разработчики улучшили элементы управления формой, input groups и прочие компоненты.

В предыдущей версии настраиваемые элементы управления формой использовались в качестве дополнения к дефолтным инструментам браузера. В v5 это отдельная группа элементов управления, включая переключатели, флажки и т.п. Сделано это для того, чтобы придать им одинаковый вид и поведение в разных браузерах.

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

6. Добавление API-утилит

Здесь разработчики Bootstrap не оригинальны, библиотеки утилит ранее добавили, например, создатели CSS-библиотеки Tailwind CSS.

Команда Bootstrap добавила возможность использования утилит еще в 4 версии, там это было организовано с использованием глобальных классов $ enable- *. В новой версии разработчики решили перейти на API, новый язык и синтаксис в Sass. Все это дает возможность создавать собственные утилиты, сохраняя при этом возможность удалять и или изменять дефолтные.

Для улучшения организации процесса работы некоторые утилиты из версии 4 переместили в раздел Helpers.

7. Новая библиотека иконок

Еще одно приятное нововведение — добавление открытой библиотеки иконок, в которой содержится более 1300 элементов. Поскольку библиотека открыта, пользователи могут модифицировать иконки по своему вкусу.

Поскольку это изображения SVG, их можно быстро масштабировать и модифицировать, а также стилизовать с помощью CSS.

Установить иконки можно при помощи npm:

$ npm i bootstrap-icons

Кое-что еще

Кроме указанных нововведений, команда представила еще несколько:

• Новый логотип. Иронизируя над этим достижением, сами разработчики поместили новинку на первое место в списке.
• Новый компонент offcanvas. Он поставляется с настраиваемым фоном, body scroll и размещением. Компоненты offcanvas можно разместить с разных сторон от viewport. Настраиваются параметры посредством атрибутов данных или API JavaScript.
• .accordion, основанный на .card, заменили реализацией .accordion без .card. Новинка все же использует плагин Collapse JavaScript, но с кастомными HTML и CSS.

• Блог компании Selectel
• Веб-разработка
• CSS
• Программирование
• HTML

The Bootstrap Blog

News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons.

Bootstrap 5.2.0

Bootstrap v5.2.0 is finally stable! We’ve ironed out more bugs, improved more documentation, written new guides and built out new functional environment examples, and so much more!

Keep reading for highlights from both beta and stable releases.

Docs redesign

As previewed in our beta release, the docs have been redesigned! It starts with our new homepage where we have a more complete representation of Bootstrap’s features and an updated design.

The docs sidebar navigation has been overhauled to have always expanded groups for easier browsing, a brand new DocSearch experience with search history, and new responsive offcanvas drawers for both sidebar and navbar on mobile.

We even updated our version picker in the navbar to cross-link between minor releases!

Updated buttons and inputs

With our docs redesign, we refreshed buttons and inputs with modified padding and border-radius . Here’s a look at the before and after of our buttons:

Tons of new CSS variables

Nearly all our components now have CSS variables for real real-time customization, easier theming, and (soon) color mode support starting with dark mode. You can see what CSS variables are available on every docs page, like our buttons:

--#btn-padding-x: #$btn-padding-x>; --#btn-padding-y: #$btn-padding-y>; --#btn-font-family: #$btn-font-family>; @include rfs($btn-font-size, --#$prefix>btn-font-size); --#btn-font-weight: #$btn-font-weight>; --#btn-line-height: #$btn-line-height>; --#btn-color: #$body-color>; --#btn-bg: transparent; --#btn-border-width: #$btn-border-width>; --#btn-border-color: transparent; --#btn-border-radius: #$btn-border-radius>; --#btn-box-shadow: #$btn-box-shadow>; --#btn-disabled-opacity: #$btn-disabled-opacity>; --#btn-focus-box-shadow: 0 0 0 #$btn-focus-width> rgba(var(--#$prefix>btn-focus-shadow-rgb), .5); 

Values for virtually every CSS variables are assigned via Sass variable, so customization via CSS and Sass are both well supported. Also included for several components are examples of customizing via CSS variables.

New _maps.scss

Bootstrap v5.2.0 introduced a new Sass file with _maps.scss that pulls out several Sass maps from _variables.scss to fix an issue where updates to an original map were not applied to secondary maps that extend it. It’s not ideal, but it resolves a longstanding issue for folks when working with customized maps.

For example, updates to $theme-colors were not being applied to other maps that relied on $theme-colors (like the $utilities-colors and more), which created broken customization workflows. To summarize the problem, Sass has a limitation where once a default variable or map has been used, it cannot be updated. There’s a similar shortcoming with CSS variables when they’re used to compose other CSS variables.

This is also why variable customizations in Bootstrap have to come after @import «functions»; , but before @import «variables»; and the rest of our import stack. The same applies to Sass maps—you must override the defaults before they get used. The following maps have been moved to the new _maps.scss :

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

Your custom Bootstrap CSS builds should now look like this with a separate maps import.

 // Functions come first  @import "functions";   // Optional variable overrides here + $custom-color: #df711b; + $custom-theme-colors: ( + "custom": $custom-color + );   // Variables come next  @import "variables";  + // Optional Sass map overrides here + $theme-colors: map-merge($theme-colors, $custom-theme-colors); + + // Followed by our default maps + @import "maps"; +  // Rest of our imports  @import "mixins";  @import "utilities";  @import "root";  @import "reboot";  // etc 

New helpers and utilities

We’ve updated our helpers and utilities to make it easier to quickly build and modify custom components:

• Added new .text-bg- helpers. Instead of setting individual .text-* and .bg-* utilities, you can now use the .text-bg-* helpers to set a background-color with contrasting foreground color .
• Expanded font-weight utilities to include .fw-semibold for semibold fonts.
• Expanded border-radius utilities to include two new sizes, .rounded-4 and .rounded-5 , for more options.

Expect more improvements here as v5’s development continues.

Responsive offcanvas

Our Offcanvas component now has responsive variations. The original .offcanvas class remains unchanged—it hides content across all viewports. To make it responsive, change that .offcanvas class to any .offcanvas- class.

New Examples repo and guides

Since the beta, we’ve completely rewritten our Webpack guide and Parcel guide. We’ve also added a new Vite guide.

In addition, we’ve turned every one of those guides into a fully functioning example in our new twbs/examples repo. We’ve even added a couple more examples to the repo, with plans to create even more.

• Starter – CDN links for our CSS and JS
• Sass & JS — Import Sass, Autoprefixer, Stylelint, and our JS bundle via npm
• Sass & ESM JS — Import Sass, Autoprefixer, and Stylelint via npm, and then load our ESM JS with a shim
• Webpack — Import and bundle Sass and JS with Webpack
• Parcel — Sass, JS via Parcel
• Vite — Sass, JS via Vite
• Bootstrap Icons font — Import Bootstrap Icons via icon font

Each guide matches up to a new example in that repo, and nearly all of them can be immediately available in StackBlitz. Now you don’t even need to have a development environment configured on your computer to get started with Bootstrap.

And did we mention that nearly all our code snippets now have an open in StackBlitz button?

And more!

• Introduced new $enable-container-classes option. — Now when opting into the experimental CSS Grid layout, .container-* classes will still be compiled, unless this option is set to false . Containers also now keep their gutter values.
• Thicker table dividers are now opt-in. — We’ve removed the thicker and more difficult to override border between table groups and moved it to an optional class you can apply, .table-group-divider . See the table docs for an example.
• Scrollspy has been rewritten to use the Intersection Observer API, which means you no longer need relative parent wrappers, deprecates offset config, and more. Look for your Scrollspy implementations to be more accurate and consistent in their nav highlighting.
• Added .form-check-reverse modifier to flip the order of labels and associated checkboxes/radios.
• Added striped columns support to tables via the new .table-striped-columns class.
• Added a new experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string.
• Added new smooth-scroll to Scrollspy.

Get the release

Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:

npm i bootstrap@v5.2.0 

Read the GitHub v5.2.0 changelog for a complete list of changes in this release.

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.