7 новых функций, на которые следует обратить внимание в Bootstrap 5

Bootstrap 5 претерпел серьезные изменения, включая отказ от поддержки Internet Explorer (IE) и зависимости jQuery. Bootstrap – это самый популярный в мире фреймворк CSS, разработанный Twitter. Фреймворк пользовательского интерфейса с открытым исходным кодом рассчитывает позиционировать себя в будущем, и это свидетельствует о том, что в v5 были внесены революционные изменения.

Падение Bootstrap для IE сделало его первым инструментом веб-разработки для этого. Этот шаг связан с тем, что рыночная доля Internet Explorer продолжает сокращаться, составляя менее 3% всех веб-браузеров.

Читайте дальше, чтобы узнать, какие еще улучшения были внесены в Bootstrap и как они повлияли на вас.

1. Поддержка jQuery

Bootstrap больше не будет использовать библиотеку jQuery. Вместо этого команда разработчиков улучшила библиотеку JavaScript, чтобы внести это изменение. Зависимость jQuery не обязательно была плохой вещью в Bootstrap.

Фактически, появление jQuery радикально изменило способ использования JavaScript. Это упростило написание задач на JavaScript, которые в противном случае потребовали бы много строк кода.

Связанный: Узнайте, как создать элемент в jQuery

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

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

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

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

Отказавшись от поддержки Internet Explorer, можно использовать настраиваемые свойства (переменные) CSS. IE не поддерживает настраиваемые свойства – это лишь одна из причин, по которой он долгое время сдерживал веб-разработчиков.

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

Доступны два типа переменных: корневые переменные и компонентные переменные.

Доступ к корневым переменным можно получить везде, где загружен Bootstrap CSS. Эти переменные находятся в файле _root.scss и являются частью скомпилированных файлов dist.

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

3. Улучшенная сетка.

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

• Класс желоба ( .gutter ) был заменен служебным ( .g * ), во многом похожим на поля и отступы.
• Также были включены классы вертикального интервала.
• Столбцы больше не имеют значения по умолчанию : position: relative

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

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

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

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

5. Улучшенные элементы управления формой

Bootstrap улучшил элементы управления формой, группы ввода и многое другое.

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

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

6. Bootstrap 5 добавляет API утилит.

Вслед за новыми библиотеками CSS, такими как Tailwind CSS, Bootstrap теперь также добавляет служебную библиотеку. Команда начальной загрузки говорит, что они рады видеть, как другие разработчики «оспаривают то, как мы строили в Интернете за последние десять с лишним лет». ”

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

Чтобы улучшить организацию, некоторые утилиты, которые были в версии 4, были перемещены в раздел «Помощники».

7. Новая библиотека значков начальной загрузки

Bootstrap теперь может похвастаться собственной библиотекой SVG-иконок с открытым исходным кодом, содержащей более 1300 иконок. Он специально разработан для компонентов фреймворка, но вы все равно можете работать с ними в любом проекте.

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

Вы можете установить значки с помощью npm:

 $ npm i bootstrap-icons

Установите Bootstrap 5

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

 $ npm i bootstrap@next

На момент написания этой статьи фреймворк находится в бета-версии 3. Это означает, что программное обеспечение безопасно в использовании, но все еще находится в разработке. Не стесняйтесь давать отзыв команде и вносить любой необходимый вклад.