Узнайте, как вы можете использовать новейшие функции Bootstrap, в том числе подробности о больших изменениях в элементах управления формой.
Bootstrap — это популярный интерфейсный фреймворк, который произвел революцию в веб-разработке. В своем последнем выпуске Bootstrap 5.3.0 фреймворк представил множество новых интересных функций. и усовершенствования, позволяющие создавать потрясающие, адаптивные, многофункциональные веб-сайты и приложения.
Переключение темного режима
Один из примечательных Дополнения Bootstrap 5.3.0 это переключатель для темный режим. Этот переключатель позволяет пользователям вашего веб-сайта легко переключаться между светлым и темным режимами, облегчая беспрепятственное использование вашего веб-сайта или приложения в различных условиях освещения.
Чтобы использовать эту функцию, просто добавьте data-bs-toggle="темный режим" атрибут любой кнопки или элемента ссылки.
Вот пример:
<кнопкатип="кнопка"сорт="btn btn-основной"данные-bs-переключить="темный режим">
Переключить темный режим
кнопка>Утилиты масштабирования шрифта
Bootstrap 5.3.0 представляет набор утилит масштабирования шрифта, которые позволяют вам быстро настроить размер вашего текста на основе предопределенных масштабов без необходимости выбрать определенные значения шрифта самостоятельно.
Вы можете использовать эти утилиты в сочетании с другими классами типографики Bootstrap для достижения масштабируемой и единообразной типографики на вашем веб-сайте или в приложении.
Вот несколько примеров того, как вы можете использовать утилиты масштабирования шрифта:
<псорт="ФС-1">Это самый большой размер шрифтап>
<псорт="ФС-2">Это немного меньший размер шрифтап>
<псорт="ФС-3">Это средний размер шрифтап>
<псорт="фс-4">Это маленький размер шрифтап>
<псорт="ФС-5">Это самый маленький размер шрифтап>Утилиты желоба
Еще одним нововведением в Bootstrap 5.3.0 являются утилиты Gutter. Эти утилиты упрощают добавление промежутков между столбцами в макете сетки Bootstrap без необходимости написания собственного CSS.
Вот пример того, как вы можете использовать утилиты желоба:
<дивсорт="ряд гх-3">
<дивсорт="кол">Колонка 1див>
<дивсорт="кол">Колонка 2див>
див>В этом примере используется gx-3 class, чтобы добавить отступ в 3 единицы (или 1,5 бэр) между двумя столбцами.
Обновленные элементы управления формой
элементы управления формой в Bootstrap были обновлены в версии 5.3.0 для улучшения согласованности и удобства использования. Новые элементы управления формы включают обновленные стили для флажков, переключателей и полей выбора, а также улучшенную обратную связь при проверке.
Флажки и радиокнопки
Bootstrap 5.3.0 представляет новые стили для флажков и переключателей, которые делают их более простыми в использовании и доступными. Новый дизайн отличается увеличенными областями нажатия и улучшенными индикаторами фокусировки, что упрощает взаимодействие с этими входами.
Вот пример того, как вы можете использовать новые стили флажков:
<дивсорт="проверка формы">
<входсорт="форма-проверка-ввод"тип="флажок"ценить=""идентификатор="чек1">
<этикеткасорт="форма-проверка-метка"для="чек1">Флажок по умолчаниюэтикетка>
див>А вот пример того, как вы можете использовать новые стили переключателей:
<дивсорт="проверка формы">
<входсорт="форма-проверка-ввод"тип="радио"имя="примерРадио"идентификатор="радио1"ценить="Опция 1">
<этикеткасорт="форма-проверка-метка"для="радио1"> Опция 1 этикетка>
див>Обратите внимание, как эта разметка использует .form-check-input класс для стилизации самого элемента ввода, а .form-check-label class для оформления метки.
Выберите коробки
Поля выбора также были обновлены в Bootstrap 5.3.0 с новыми стилями для большей согласованности и удобства использования. Новые стили полей выбора имеют увеличенные области нажатия и улучшенные индикаторы фокуса, что упрощает взаимодействие с этими входными данными.
Вот пример того, как вы можете использовать новые стили поля выбора:
<выбиратьсорт="форма выбора"ария-лейбл="Пример выбора по умолчанию">
<вариантвыбран>Откройте это меню выборавариант>
<вариантценить="1">Одинвариант>
<вариантценить="2">Двавариант>
<вариантценить="3">Тривариант>
выбирать>Обратите внимание, как вы можете использовать .form-выбрать класс для стилизации самого поля выбора.
Отзыв о проверке
Bootstrap 5.3.0 также представляет новые стили обратной связи проверки для элементов управления формы. Эти стили упрощают визуальную обратную связь с пользователями вашего веб-сайта, когда они неправильно заполняют форму.
Вот пример того, как вы можете использовать новые стили проверки:
<дивсорт="форм-группа">
<этикеткадля="пример инпутпароль1">Парольэтикетка>
<входтип="пароль"сорт="управление формой недействительно"идентификатор="пример инпутпароль1"заполнитель="Пароль"необходимый>
<дивсорт="неверный отзыв"> Укажите действующий пароль. див>
див>Обратите внимание, как .является недействительным указывает, что поле ввода недействительно, а .invalid-обратная связь класс отображает сообщение пользователю.
Благодаря этим новым стилям стало проще, чем когда-либо, создавать доступные и согласованные формы для вашего веб-сайта или приложения.
Захватывающие улучшения в Bootstrap 5.3.0
Bootstrap 5.3.0 — это существенное обновление популярной среды CSS, в которое добавлено несколько новых функций и улучшений. В вашем распоряжении множество новых инструментов, от переключателя темного режима до утилит масштабирования шрифтов и утилит Gutter, которые помогут вам создавать более качественные веб-сайты и приложения.