Bootstrap5: утилиты

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

---

Цвета фона

При установке цвета фона для различных элементов необходимо использовать.text-*класс, чтобы задать соответствующий цвет текста:

.bg-gradientКласс может задавать эффект градиента цвета фона:

---

Границы

Мы можем использоватьborderсвязанные классы для отображения границ по мере необходимости:

.border-1до.border-5Класс используется для установки ширины линии границы:

Следующее задает разные цвета для границы:

roundedСвязанные классы используются для установки закругленных углов:

rounded-0доrounded-3Класс используется для установки размера скруглённых углов:

---

Плавающие элементы и Clearfix

Элементы плавают вправо с помощью класса .float-end, влево с помощью класса .float-start, а класс .clearfix используется для очистки плавающих элементов:

Вы также можете задать эффект обтекания в зависимости от размера экрана (.float-*-left|right - * означает sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) или xxl (>=1400px)):

---

Выравнивание по центру

Используйте класс.mx-auto, чтобы установить элемент по центру (добавьте margin-left и margin-right как auto):

---

Ширина и высота

Ширина использует классw-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100)для установки.

Высота использует классh-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100)для установки.

---

Отступы

Синтаксис настройки отступов следующий:

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) или  xxl (>=1400px)

контрольные точки относятся к ширине экрана: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) или xxl (>=1400px).

propertyПредставляет свойство, включая:

• mИспользуется для установкиmargin
• pИспользуется для установкиpadding

sidesВ основном относится к направлению:

• tИспользуется для установкиmargin-topилиpadding-top
• bИспользуется для установкиmargin-bottomилиpadding-bottom
• sИспользуется для установкиmargin-leftилиpadding-left
• eИспользуется для установкиmargin-rightилиpadding-right
• xИспользуется для установки*-leftи*-right
• yИспользуется для установки*-topи*-bottom
• blank - Используется для установки четырех направлений элементаmarginилиpadding

sizeОтносится к размеру отступа:

• 0- Установитьmarginилиpaddingявляется0
• 1- Установитьmarginилиpaddingявляется$spacer * .25
• 2- Установитьmarginилиpaddingявляется$spacer * .5
• 3- Установитьmarginилиpaddingявляется$spacer
• 4- Установитьmarginилиpaddingявляется$spacer * 1.5
• 5- Установитьmarginилиpaddingявляется$spacer * 3
• auto- Установитьmarginв auto

Посмотрите на настройки исходного кода для некоторых отступов:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Другие примеры

.m-# / m-*-#	Установить отступы для всех сторон	Попробуйте
.mt-# / mt-*-#	внешний отступ сверху	Попробуйте
.mb-# / mb-*-#	внешний отступ снизу	Попробуйте
.ms-# / ms-*-#	внешний отступ слева	Попробуйте
.me-# / me-*-#	внешний отступ справа	Попробуйте
.mx-# / mx-*-#	margin слева и справа	Попробуйте
.my-# / my-*-#	margin сверху и снизу	Попробуйте
.p-# / p-*-#	Используйте стороны для установки padding	Попробуйте
.pt-# / pt-*-#	padding сверху	Попробуйте
.pb-# / pb-*-#	padding снизу	Попробуйте
.ps-# / ps-*-#	padding слева	Попробуйте
.pe-# / pe-*-#	padding справа	Попробуйте
.py-# / py-*-#	padding сверху и снизу	Попробуйте
.px-# / px-*-#	padding слева и справа	Попробуйте

Другие расширения