Bootstrap 4 Badges
Пример заголовка Новые функции
Пример заголовка Новые функции
Пример заголовка Новые функции
Пример заголовка Новые функции
Пример заголовка Новые функции
Пример заголовка Новые функции
Значки используются для добавления дополнительной информации к любому содержимому. Используйте .badge класс вместе с контекстным классом (например .badge-secondary ) внутри <span> элементов для создания прямоугольных значков. Обратите внимание, что значки масштабируются в соответствии с размером родительского элемента (если таковые имеются):
Пример
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
Контекстные значки
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Используйте любой из контекстных классов ( .badge-* ), чтобы изменить цвет индикатора событий:
Пример
<span class="badge badge-primary">Primary</span>
<span class="badge
badge-secondary">Secondary</span>
<span class="badge
badge-success">Success</span>
<span class="badge
badge-danger">Danger</span>
<span class="badge
badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge
badge-dark">Dark</span>
Таблетки значки
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Используйте .badge-pill класс, чтобы сделать значки более круглые:
Пример
<span class="badge badge-pill badge-default">Default</span>
<span class="badge
badge-pill badge-primary">Primary</span>
<span class="badge
badge-pill badge-success">Succeess</span>
<span class="badge
badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge
badge-pill badge-danger">Danger</span>
Значок внутри элемента
Пример использования значка внутри кнопки:
Пример
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>