Home-theater-designers
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 на этот раз сохраняет большую часть системы, опираясь на существующую систему, а не полностью ее изменяя. Некоторые из изменений:
- Класс желоба ( .boys ) заменен на утилиту ( .грамм* ) очень похоже на поля и отступы
- Также были включены классы вертикального интервала
- Столбцы больше не имеют значения по умолчанию позиция: относительная
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 теперь также добавляет служебную библиотеку. Команда начальной загрузки говорит, что они рады видеть, как другие разработчики оспаривают то, как мы строили в Интернете за последние десять с лишним лет.
Утилиты набирают обороты в сообществе разработчиков, и команда начальной загрузки это заметила. Команда ранее добавила положение для утилит в v4, используя глобальные $ enable- * классы. В v5 они перешли на подход API и новый язык и синтаксис в Sass. Это даст вам возможность создавать новые утилиты, сохраняя при этом возможность удалять или изменять данные по умолчанию.
Чтобы улучшить организацию, некоторые утилиты, которые были в версии 4, были перемещены в раздел «Помощники».
7. Новая библиотека значков начальной загрузки
Bootstrap теперь может похвастаться собственной библиотекой SVG-иконок с открытым исходным кодом, содержащей более 1300 иконок. Он специально разработан для компонентов фреймворка, но вы все равно можете работать с ними в любом проекте.
Поскольку это изображения SVG, их можно быстро масштабировать и реализовывать разными способами, а также стилизовать с помощью CSS.
Вы можете установить значки, используя над уровнем моря:
$ npm i bootstrap-iconsУстановите Bootstrap 5
Вы можете перейти к Официальная страница загрузки Bootstrap 5 если вы хотите его установить. Если вы хотите быть в курсе последних разработок, вы можете использовать над уровнем моря тянуть:
$ npm i bootstrap@next
На момент написания этой статьи фреймворк находится в бета-версии 3. Это означает, что программное обеспечение безопасно в использовании, но все еще находится в разработке. Не стесняйтесь давать отзыв команде и вносить любой необходимый вклад.
Делиться Делиться Твитнуть Эл. адрес Введение в веб-компоненты и компонентную архитектуруДавайте посмотрим на общие веб-компоненты и поймем, почему они полезны.
Читать далее Похожие темы- Программирование
- Веб-разработка
- JavaScript
- CSS
Джером - штатный писатель в MakeUseOf. Он освещает статьи по программированию и Linux. Он также криптоэнтузиаст и всегда следит за криптоиндустрией.
Ещё от Jerome DavidsonПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
многопользовательские онлайн-ролевые игры без скачиванияНажмите здесь, чтобы подписаться