Bootstrap 5 что нового

Вышел 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

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

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

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

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

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

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

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

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

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

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

Формы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отказ от jQuery

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

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

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

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

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

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

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

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

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

Bootstrap 5 — что нового?

Bootstrap — один из популярных HTML/CSS фреймворков в мире, созданный командой Twitter. Разработчики часто используют именно эту CSS, так как она позволяет без особых усилий создавать адаптивные веб-сайты, а также использовать красивые стили и компоненты. Совсем недавно была выпущена версия Bootstrap 5, которая имеет некоторые отличия от 4-ой. У Bootstrap 5 было несколько альфа- и бета-версий. В результате после исправления всех недочетов были внесены серьезные изменения в последнюю версию Bootstrap.

Улучшенный внешний вид и новые ощущения

Были внесены некоторые изменения во внешний вид веб-ресурса и логотип. Теперь контент имеет фиксированную ширину и в разы легче воспринимается. Обновленный логотип смотрится интересно, многим разработчикам понравился. Этот лого, как утверждает создатель, воплощает ощущение стиля набора правил.

Отказ от jQuery

Одно из нововведений в последней версии — отказ от jQuery в пользу JavaScript. Конечно, библиотеку jQuery используют многие сайты по сей день. Благодаря постоянному развитию JavaScript и браузерной поддержке мы больше не зависимы от jQuery в своих проектах. Отметим, что проекты, которые были созданы с Bootstrap 5, имеют более легкие по размеру файлы и быстрее в плане загрузки страниц.

Конечно, вы все еще сможете использовать jQuery. В случае если Бутстрап обнаружит jQuery, он сразу же добавит необходимые компоненты в систему плагинов.

CSS переменные (пользовательские CSS-свойства)

Из-за того, что разработчики отказались от браузера Internet Explorer, в v.5 CSS переменные стали использоваться шире. В Bootstrap 5 добавлены точки останова и еще некоторые компоненты.

Улучшенная сеточная система

В 5 версии сохранена большая часть системы сеток. Разработчики не обновляли ее полностью, так как в прошлом при переходе с v.3 до v.4 возникали трудности. Кроме этого добавился класс .g-*, позволяющий указывать нужные отступы между ячейками.

Изменения в документации

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

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

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

Были улучшены элементы по управлению формой, input groups и другие компоненты. В v5 был создан отдельный раздел документации — Forms, в котором были объединены все стили форм.

API-утилит

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

Библиотека иконок

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

Какой вывод?

Bootstrap по сей день остается в тренде популярных HTML/CSS-фреймворков. Каждый веб-разработчик хотя бы раз использовал Бутстрап в своей работе. С дополнениями Bootstrap 5 разрабатывать адаптивные веб-сайты станет еще проще и легче. Если вы используете Bootstrap 4, можете спокойно переходить на 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?

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