Утилиты Bootstrap 5

Утилиты / Помощники классы

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

Рамка

Использование класса рамки для добавления или удаления рамки элемента:

Примеры

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Попробуйте亲自

Ширина рамки

Использование .border-1 до .border-5 Изменение ширины рамки с помощью класса .border-5:

Примеры

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Попробуйте亲自

Цвет рамки

Добавление цвета рамки с помощью класса цвета контекста рамки:

Примеры

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Попробуйте亲自

Закругленные края рамки

Использование rounded Добавление закругленных углов к элементам класса:

Примеры

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Попробуйте亲自

Плавание и удаление плавания

Использование .float-end Класс для плавания вправо элементов или использование .float-start Плавать влево и использовать .clearfix Класс для удаления плавания:

Примеры

<div class="clearfix">
  <span class="float-start">Плавать влево</span>
  <span class="float-end">Плавать вправо</span>
</div>

Попробуйте亲自

Адаптивное плавание

Плавать влево или вправо в зависимости от ширины экрана с использованием адаптивных классов плавания (.float-*-left|right) где * является:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Примеры

<div class="float-sm-end">Плавать влево на экранах маленького или более широких, чем маленький</div><br>
<div class="float-md-end">Плавать влево на экранах среднего или более широких, чем средний</div><br>
<div class="float-lg-end">Плавать влево на экранах большой или более широких, чем большой</div><br>
<div class="float-xl-end">Плавать влево на экранах超大 или более широких, чем超大</div><br>
<div class="float-xxl-end">Плавать влево на экранах特大 или более широких, чем特大</div><br>
<div class="float-none">Не производить浮动</div>

Попробуйте亲自

Центрирование по горизонтали

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

Примеры

<div class="mx-auto bg-warning" style="width:150px">Центрирование</div>

Попробуйте亲自

Ширина

Использование классов w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Установка ширины элемента:

Примеры

<div class="w-25 bg-warning">Ширина 25%</div>
<div class="w-50 bg-warning">Ширина 50%</div>
<div class="w-75 bg-warning">Ширина 75%</div>
<div class="w-100 bg-warning">Ширина 100%</div>
<div class="w-auto bg-warning">Автоматическая ширина</div>
<div class="mw-100 bg-warning">Максимальная ширина 100%</div>

Попробуйте亲自

Высота

Использование классов h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Установка высоты элемента:

Примеры

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Высота 25%</div>
  <div class="h-50 bg-warning">Высота 50%</div>
  <div class="h-75 bg-warning">Высота 75%</div>
  <div class="h-100 bg-warning">Высота 100%</div>
  <div class="h-auto bg-warning">Автоматическая высота</div>
  <div class="mh-100 bg-warning" style="height:500px">Максимальная высота 100%</div>
</div>

Попробуйте亲自

Интервалы

Bootstrap 5 имеет широкий спектр реактивных классов实用ных программ для отступов и отступов. Они подходят для всех точек разрыва:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Использование этих классов имеет следующий формат:{свойство}{стороны}-{размер} используется для xsи {свойство}{стороны}-{разделитель}-{размер} используется для sm、md、lg、xl и xxl。

свойство является одним из следующих:

  • m - устанавливается отступ
  • p - устанавливается отступ

стороны является одним из следующих:

  • t - устанавливается верхний отступ или верхний отступ
  • b - устанавливается нижний отступ или нижний отступ
  • s - устанавливается левый отступ или левый отступ
  • e - устанавливается правый отступ или правый отступ
  • x - устанавливается одновременно левый отступ и правый отступ или левый отступ и правый отступ
  • y - устанавливается одновременно верхний отступ и нижний отступ или верхний отступ и нижний отступ
  • пустота - устанавливается по всем четырем сторонам элемента отступ или отступ

размер является одним из следующих:

  • 0 - устанавливается отступ или отступ установить 0
  • 1 - устанавливается отступ или отступ установить .25rem
  • 2 - устанавливается отступ или отступ установить .5rem
  • 3 - устанавливается отступ или отступ установить 1rem
  • 4 - устанавливается отступ или отступ установить 1.5rem
  • 5 - устанавливается отступ или отступ установить 3rem
  • auto - устанавливается отступ установить в auto

Примеры

<div class="pt-4 bg-warning">у меня только верхние внутренние поля (1.5rem)</div>
<div class="p-5 bg-success">у меня есть внутренние поля (3rem) по всем сторонам</div>
<div class="m-5 pb-5 bg-info">у меня есть внешние поля (3rem) и нижние внутренние поля (3rem)</div>

Попробуйте亲自

более примеров интервала

.m-# / m-*-# внешние поля всех сторон попробуйте
.mt-# / mt-*-# внешнее поле сверху попробуйте
.mb-# / mb-*-# внешнее поле снизу попробуйте
.ms-# / ms-*-# внешнее поле слева попробуйте
.me-# / me-*-# внешнее поле справа попробуйте
.mx-# / mx-*-# внутренние поля слева и справа попробуйте
.my-# / my-*-# внешние поля сверху и снизу попробуйте
.p-# / p-*-# внутренние поля всех сторон (отступы) попробуйте
.pt-# / pt-*-# внутреннее поле сверху попробуйте
.pb-# / pb-*-# внутреннее поле снизу попробуйте
.ps-# / ps-*-# внутреннее поле слева попробуйте
.pe-# / pe-*-# внутреннее поле справа попробуйте
.py-# / py-*-# внутренние поля сверху и снизу попробуйте
.px-# / px-*-# внутренние поля слева и справа попробуйте

Вы можете найти информацию на Руководство по единицам CSS в CSS можно узнать больше о rem и различных размерных единицах.

тень

Используйте shadow- класс добавляет тень к элементу:

Примеры

<div class="shadow-none p-4 mb-4 bg-light">нет тени</div>
<div class="shadow-sm p-4 mb-4 bg-white">Маленькая тень</div>
<div class="shadow p-4 mb-4 bg-white">Стандартная тень</div>
<div class="shadow-lg p-4 mb-4 bg-white">Крупная тень</div>

Попробуйте亲自

Вертикальное выравнивание

Используйте align- Классы изменяют способ выравнивания элементов (только для inline, inline-block, inline-table и ячеек таблиц):

Примеры

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Попробуйте亲自

Соотношение сторон

Создайте адаптивное видео или слайд-шоу на основе ширины родительского элемента.

Добавьте .ratio Классы соответствуют выбранному вами соотношению сторон .aspect-ratio-* Добавьте к родительскому элементу и добавьте вставку (видео или iframe):

Примеры

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Попробуйте亲自

Видимость

Использование .visible или .invisible Классы могут контролировать видимость элементов:

Комментарий:Эти классы не изменяют значение CSS display. Они только добавляют visibility:visible или visibility: hidden;

Примеры

<div class="visible">Я видим.</div>
<div class="invisible">Я невидим.</div>

Попробуйте亲自

Иконка закрытия

Использование .btn-close Классы можно использовать для настройки стиля иконки закрытия. Обычно используется в диалоговых окнах и модальных окнах.

Примеры

<button type="button" class="btn-close"></button>

Попробуйте亲自

Экранного чтения

Использование .visually-hidden Классы можно использовать для скрытия элементов на всех устройствах, кроме экранов чтения:

Примеры

<span class="visually-hidden">Будет скрыт на всех экранах, кроме экранов чтения.</span>

Попробуйте亲自

Цвета

Как указано в разделе «Цвета», ниже приведен список всех классов текста и фона цветов:

Классы для цвета текста:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(по умолчанию цвет body / обычно черный)
  • .text-light

Примеры

Попробуйте亲自

Контекстные текстовые классы также можно использовать для ссылок:

Примеры

Попробуйте亲自

Вы также можете использовать классы .text-black-50 или .text-white-50 для добавления 50% прозрачности черному или белому тексту:

Примеры

Попробуйте亲自

Цвет фона

Классы для фона цвета:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

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

Примеры

Попробуйте亲自