Bootstrap 5 Options: Кастомизация и глобальные CSS-переменные

Bootstrap 5 предоставляет множество опций для кастомизации, позволяя вам легко изменять глобальные CSS-параметры и стиль элементов. Давайте рассмотрим их.

Кастомизация элементов <select>

Стилизация обычных <select> элементов

Вы можете легко настроить внешний вид обычных выпадающих списков с помощью класса .form-select. Например:

<select class="form-select" aria-label="Пример обычного выпадающего списка">
  <option selected>Откройте этот список</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Размеры выпадающих списков

Вы также можете выбрать размеры для кастомных выпадающих списков, чтобы они соответствовали текстовым полям. Например:

<select class="form-select form-select-lg mb-3" aria-label="Пример большого выпадающего списка">
  <option selected>Откройте этот список</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

<select class="form-select form-select-sm" aria-label="Пример маленького выпадающего списка">
  <option selected>Откройте этот список</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Множественный выбор и размеры

Вы можете добавить атрибут multiple, чтобы позволить множественный выбор:

<select class="form-select" multiple aria-label="Пример множественного выбора">
  <option selected>Откройте этот список</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Или установить размер списка с помощью атрибута size:

<select class="form-select" size="3" aria-label="Пример списка с размером 3">
  <option selected>Откройте этот список</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Отключение элементов

Чтобы сделать выпадающий список неактивным, добавьте атрибут disabled:

<select class="form-select" aria-label="Неактивный выпадающий список" disabled>
  <option selected>Откройте этот список</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Переменные Sass

Bootstrap 5 предоставляет множество переменных Sass для кастомизации. Например, вы можете настроить цвета, шрифты, отступы и многое другое. Вот некоторые из них:

$form-select-padding-y: $input-padding-y;
$form-select-padding-x: $input-padding-x;
$form-select-font-family: $input-font-family;
// ... и другие переменные

У Bootstrap есть встроенный файл пользовательских переменных в котором вы легко можете переключать глобальные настройки CSS с помощью новых $enable-* переменных Sass. Замените значение переменной и при npm run test необходимости перекомпилируйте с ним.

Вы можете найти и настроить эти переменные для ключевых глобальных параметров в файле scss/_variables.scss.

Переменная	Ценности	Описание
`$spacer`	`1rem` (по умолчанию) или любое значение> 0	Задает значение спейсера по умолчанию для программного создания наших утилит Spacing.
`$enable-rounded`	`true` (по умолчанию) или `false`	Включает предопределенные `border-radius` стили для различных компонентов.
`$enable-shadows`	`true`или `false` (по умолчанию)	Включает предопределенные `box-shadow` стили для различных компонентов.
`$enable-gradients`	`true` или `false` (по умолчанию)	Включает предопределенные градиенты с помощью `background-image` стилей для различных компонентов.
`$enable-transitions`	`true` (по умолчанию) или `false`	Включает предопределенные `transition` для различных компонентов.
`$enable-reduced-motion`	`true` (по умолчанию) или `false`	Включает медиа-запрос prefers-reduced-motion , который подавляет определенные анимации / переходы в зависимости от настроек браузера / операционной системы пользователя.
`$enable-grid-classes`	`true` (по умолчанию) или `false`	Позволяет создавать классы CSS для системы сеток (например `.row`, `.col-md-1` и т.д.).
`$enable-caret`	`true` (по умолчанию) или `false`	Включает каретку псевдоэлемента `.dropdown-toggle`.
`$enable-button-pointers`	`true` (по умолчанию) или `false`	Добавьте курсор «рука» к неотключенным кнопочным элементам.
`$enable-rfs`	`true` (по умолчанию) или `false`	Глобально включает RFS .
`$enable-validation-icons`	`true` (по умолчанию) или `false`	Включает `background-image` значки в текстовых входах и некоторых настраиваемых формах для состояний проверки.
`$enable-negative-margins`	`true` или `false`(по умолчанию)	Позволяет генерировать с отрицательным margin.
`$enable-deprecation-messages`	`true` или `false` (по умолчанию)	Установите для `true` отображения предупреждений при использовании любых устаревших миксинов и функций, которые планируется удалить в `v5`.
`$enable-important-utilities`	`true` (по умолчанию) или `false`	Включает `!important` суффикс в служебных классах.

Заключение

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

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

На этой странице