Приветствую вас на моем блоге! В данной статье речь пойдет про, наверно самый популярный HTML/CSS фреймворк в мире, Bootstrap. Дело в том, что разработчики выпустили новую версию Bootstrap 5, которая несколько отличается от 4-ой. Первая alpha версия была выпущена еще 15 июня 2020 года. Но стабильного релиза еще не было и на момент написания данной статьи это версия v5.0.0-beta2.
Вообще, для тех, кто не знает, что такое Бутстрап я уже писал статью на данную тему, где обозревал 3-ю версию данного фреймворка. С тех пор в Бутстрап многое изменилось.
Я стараюсь шагать в ногу со временем и как только узнал о выходе новой версии, то сразу же решил попробовать на практике. Сначала я для себя значимых изменений не увидел, но решил попробовать и сделать один проект на новой версии. Как раз по ходу верстки мне открылись некоторые прелести новой версии v.5.
И так давайте пройдемся по основным нововведениям в Bootstrap.
1. Новый внешний вид и новые ощущения
Начнем с того, что был немного изменен внешний вид сайта домашней страницы с документацией и логотип Бутстрап. Ширина контента теперь не тянется во весь экран, а имеет фиксированную ширину. Так легче воспринимается контент. Я вообще терпеть не могу резиновые макеты, когда контент растягивается с лева на право экрана браузера.
Обновление получил и логотип Bootstrap. Новый лого смотрится более интересно, по крайней мере сейчас он мне нравится больше.
Как утверждают создатели Бутстрап, новый логотип воплощает ощущение стиля набора правил, заключенных в фигурные скобки.
2. Отказ от поддержки браузера Internet Explorer
Наконец-то свершилось то, что должно было свершиться давно — отказ от поддержки браузеров Internet Explorer. Но это не удивительно, так как от поддержки данного браузера отказался и сам Microsoft. У них теперь новое детище — Microsoft Edge, который соответствует всем современным браузерам и ничуть им не уступает. Доля пользователей IE с каждым днем становится все меньше и меньше и составляет по статистике в мире менее 1% пользователей.
Правда в документации я не нашел от каких именно версий IE они отказались, но на просторах интернета говорится о версиях IE 10 и 11. Отказ от IE для разработчиков я понимаю так (я ведь сам веб-разработчик): вот идете вы в гору с тяжелым мешком на спине и подниматься вам все труднее и труднее, и тут вы понимаете, что можно сбросить этот мешок и идти налегке. И теперь вы готовы покорить любые вершины. Иными словами, отказ от Internet Explorer дает большие возможности в создании более удобных и быстрых инструментов в будущем.
3. Отказ от JQuery в пользу JavaScript
Наверно самым большим нововведением в данной версии будет отказ от библиотеки jQuery в пользу нативного JavaScript. Это касается js-плагинов Бутстрап, которые долгое время работали с применением jQuery. Да, jQuery это популярная библиотека, которую сегодня все еще используют миллионы сайтов по миру, но благодаря прогрессу в развитии JavaScript и браузерной поддержке мы сегодня имеем возможность не применять jQuery в своих проектах, как зависимость. Лично я уже не применяю jQuery в новых проектах и пишу на чистом JS с поддержкой синтаксиса ES6. Это все означает, что проекты созданные с Bootstrap 5 станут значительно легче по размеру файлов и быстрее в плане загрузки страниц.
Хорошей новостью является и то, что если вы хотите все еще использовать jQuery, то это возможно. Если Bootstrap обнаружит jQuery, то он автоматически добавит все компоненты в систему плагинов. А это означает, что вы сможете вызывать их как и раньше. Например, плагин всплывающей подсказки можно вызывать следующим образом — $('[data-bs-toggle="tooltip"]').tooltip()
. Тоже самое касается всех остальных плагинов.
Вообще хочу сказать, что по обновлению js-плагинов была проведена титаническая работа. И в основном, в текущих бета-версиях тестируются и устраняются баги именно js-плагинов.
4. CSS переменные (пользовательские CSS-свойства)
Благодаря отказу от браузера Internet Explorer в новой версии Бутстрап пользовательские CSS переменные стали использоваться значительно шире. В 4-ой версии корневые переменные содержали в себе только цвета и шрифты. В 5-ой версии были добавлены параметры макета (точки останова) и несколько компонентов.
Вообще, я для себя не вижу полезности в этих css-переменных, так как я не пишу стили в css. Я использую препроцессор SASS и gulp-сборку для верстки. При таком подходе у меня все переменные хранятся в отдельном sass-файле (_variables.sass), так что управлять значениями можно намного гибче. Но я быть может напишу отдельную статью про css-переменные, может кому будет полезно.
5. Улучшенная документация
Что касается документации, то она стала более удобней для навигации и получения информации. Например, добавлен новый раздел «Customize«, в который вынесены все настройки и кастомизация Бутстрап с помощью SASS. Здесь вы можете узнать, как можно создать свои темы и расширять Бутстрап под свои нужды.
Формы
Компонент форм получил отдельный раздел документации — Forms. По сути здесь объединили все стили форм, включая компонент группы полей. Замечу, что в документации v.4 компонент группы полей это отдельный подраздел. Стало значительно удобнее, даже поиском не нужно пользоваться.
Что касается радио-кнопок и чек-боксов, то в 4-ой версии они были по умолчанию стилизованы браузерным стилем. Чтобы стилизовать кастомно необъодимо было добавить префикс custom-*
. В Bootstrap 5 необходимость в этом префиксе нет, формы имеют кастомную стилизацию по умолчанию. И это лично меня очень порадовало. Например, для того, чтобы вывести стилизованный чек-бокс, достаточно указать прежние классы:
<!-- Чек-бокс -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Чек-бокс по умолчанию
</label>
</div>
<!-- Радио-кнопка -->
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Радио-кнопка по умолчанию
</label>
</div>
<!-- Переключатель -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Переключатель</label>
</div>
В результате получаем вот такую прелесть.
Цвета
Была значительна расширена палитра цветов. Так что подбирать оттенки стало значительно проще без использования таких трюков, как darken
или lighten
в sass.
Также была проделана работа по улучшению цветового контраста основных цветов. Да, цвета действительно стали намного приятнее.
6. API утилит
В Bootstrap 5 у нас появилась возможность создавать свои или изменять имеющиеся утилиты. Утилиты — это вспомогательные классы, которые ускоряют работу. Например, классы отступов (margin, padding), классы фоновых цветов, классы позиционирования, классы отображения (display) и т.п.
Вот как выглядят утилиты ширины и отступа (margin) в sass файле:
$utilities: () !default;
$utilities: map-merge(
(
// ...
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
// ...
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
// ...
), $utilities);
В параметр class
мы можем указать любой свой класс. Так что теперь к верстке можно подойти намного гибче.
Некоторые утилиты были вынесены в отдельный раздел «Helpers» (помощники). Я често сказать не совсем понял для чего это было сделано, но как утверждают разработчики — это для облегчения именования и улучшения документации.
7. Улучшенная сеточная система
Трудности перехода с v.3 до v.4 Bootstrap сподвигли разработчиков не отходить далеко от сеточной ситемы v.4.x. Добавились лишь незначительные изменения.
В связи с тем, что была добавлена новая точка останова (xxl), то соответственно в сетке появился новый класс .col-xxl-*
. О точке останова xxl поговорим чуть ниже в статье.
Добавился класс .g-*
(сокращенно от gutters) для добавления отступов в сетку. Данный класс добавляется к классу .row. Например, чтобы сделать отступы между ячейками сетки (горизонтальные и вертикальные) с условным значением 2 достаточно добавить класс g-2
к классу строки .row
. Можно также отдельно задать горизонтальный или вертикальный отступ — gx-2
или gy-2
соответственно. Это чем-то напоминает утилиты интервалов margin и padding. Отмечу, что сейчас задать отступы ячейкам стало намного легче, вот это действительно меня порадовало.
<div class="row g-2">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
Также был добавлен новый класс .row-cols-auto
для строки с классом .row
. Данный класс обеспечивает автоматическое распределение колонок равной ширины в пределах родительского блока.
Класс .form-row
был удален и заменен новой сеточной системой.
Ячейки сетки больше не используют свойство .position: relative
по умолчанию. и это здорово, так как частенько приходилось это переопределять.
8. Иконки Bootstrap
Теперь Bootstrap имеет свою собстенную коллекцию svg иконок. Не скажу, что они отностся именно к 5-ой версии, но это полезно для веб-разработки, поэтому я решил упомянуть и про них. Коллекция насчитывает более 1300 высококачественных иконок и подключить их можно, как svg-спрайт или иконочный шрифт. Искать нужные иконки можно по удобному поиску, который мнгновенно выдает результаты.
Мне очень понравилась данная коллекция иконок. Причем удобно то, что можно посмотреть как та или иная иконка будет смотреться, например, в кнопке или в сгруппированном поле формы.
В блоке справа мы можем выбрать удобный формат для сохранения иконки.
Стоит отметить, что данная коллекция не имеет привязки конкретно к Bootstrap. Вы можете использовать их и без применения Бутстрап в любом проекте.
9. Эксперементальные функции
RTL (right to left) — это функция которая сейчас активно тестируется и если пойдет все хорошо появится в будущих версиях Бутстрап 5. RTL означает справа на лево, то есть есть возможность использовать шрифты, котрые читаются справа на лево. Например, арабский шрифт. Как это выглядит можете посмотреть на данном примере.
Offcanvas — эксперимент с выезжающей боковой панелью на мобильных устройствах. Этой панелью может быть блок меню или корзина покупок в интернет-магазине. На мой взгляд нужная вещь, так как в основном я верстаю мобильное меню именно выезжающим слева на право, а не выпадающим сверху, как это сейчас реализовано в Bootstrap. Чтобы оценить будущую фичу можете глянуть пример. Уменьшаете окно браузера до мобильных размеров.
10. Дополнительные приятные плюшки
1. Как было уже отмечено выше, добавлена новая точка останова (grid-breakpoint) по названием xxl. Применяется для широкоформатных экранов разрешением от 1440 пикс. и выше. Честно говоря, в 4-ой версии я сам его добавлял при необходимости. А тут он уже доступен из коробки.
2. В миксинах sass бреакпоинтов max-width произошли небольшие изменения. В версии v.4, чтобы указать стили, скажем для экрана 992px и ниже, нужно было использовать миксин с точкой md, то есть вот так — @include media-breakpoint-down(md) { … }
. Я честно сказать немного тут путался, в голове цифра 992, а алиас точки используем — md
. В версии v.5 все так, как и должно быть — @include media-breakpoint-down(lg) { … }
.
3. В Bootstrap 5 RFS (responsive font size) включен уже по умолчанию. В 4-ой версии его нужно было включать отдельно, установив значение $enable-responsive-font-sizes: true
. Также нам теперь доступен миксин font-size()
. В него можно передать значение шрифта для декстопного экрана, а для мобильных будет идти плавное уменьшение. Например, @include font-size(36px)
. Правда я пока не разобрался, как указывать минимальное значение для мобильных устроств. Если кто знает напишите в комментариях. Вообще для RFS есть отдельный репозитрий в GitHub, так что если интересно можете туда заглянуть.
4. Появилась плавная прокрутка страницы до якоря и реализовано это с помощью CSS. Только я не знаю насколько полезна эта штука. Ну можно сделать ссылку «Наверх» в подвале без JS. В общем я эту фичу отключил. Давил в свой файл переменных $enable-smooth-scroll: false
и все, плавная прокрутка теперь не работает.
5. Интеграция сетки Бутстрап с библиотекой Masonry. Вот это тоже меня порадовало. Мне нравится библиотека Masonry и сетка Бутстрап тоже. Как же их подружить думал я? И вот, получите, распишитесь… Подключается довольно легко. Ознакомиться можете на странице примера.
6. Заменены буквы в классах, означающие начало и конец (горизонтальное направление): l (left) и r (right), на более логичные имена s (start) и e (end) соответственно. В v.4, к примеру, чтобы указать margin-left
нужно было указать класс — ml-*
. Тоже самое, если нужно margin-right
— mr-*
. В Bootstrap 5 теперь будет так: ms-*
и me-*
. Это касается всех классов, где применяются буквы для обозначения лево и право (начало, конец). Надеюсь понятно объяснил.
Миграция с v.4 до v.5
Если вы хотите перейти на Bootstrap 5 с версии 4.x, то ознакомьтесь сначала с руководством по миграции. Придется хорошо поработать.
Заключение
Разработчики легендарного Bootstrap в очередной раз удивили нас нововведениями. Отмечу, что Bootstrap уже довольно продолжительное время остается в тренде популярных HTML/CSS-фреймворов в мире. Сегодня я даже не знаю веб-разработчика, который не использовал бы Бутстрап в своей работе.
Ну чтож будем ждать стабильного релиза. Будет это, как говорят авторы после версии beta3, а вот когда именно мне пока не ясно. Но я уже активно применяю 5-ю версию в своих проектах, багов пока не нашел.
На этой ноте скорее всего и завершу. Всем спасибо за внимание! Вопросы/пожелания пишем в комментариях. До встречи в других постах!