Руководство Bootstrap Badge

Bootstrap Badge
Badge (.badge-pill)

1. Bootstrap Badge

Badge (Бейдж) это маленькая часть интерфейса, он обычно используется для декорации определенного компонента. Ниже являются некоторые изображения Badge использованные в странице.

Bootstrap использует класс .badge применяет к тегу (tag), чтобы создать Badge. Некоторые дополнительные классы как .badge-primary, .badge-secondary, .badge-danger,.. помогают создать фоновый цвет Badge, вы можете их использовать в подходящих контекстах.

badge-primary
badge-secondary
badge-success
badge-danger
badge-warning
badge-info
badge-light
badge-dark
badge-link

Пример использования Badge для декорации Link:

Link with Badge

<a href="#">News <span class="badge badge-primary">5</span></a><br>
<a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
<a href="#">Updates <span class="badge badge-danger">2</span></a>

Смотрите полный пример:

badge-link-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Badge</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4 class="mb-3">Link with Badge</h4>

         <a href="#">News <span class="badge badge-primary">5</span></a><br>
         <a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
         <a href="#">Updates <span class="badge badge-danger">2</span></a>

      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

По умолчанию, Badge настроены с размером Font (шрифта) равная 75% по сравнению с Font (шрифтом) родительского элемента.

<h1>Example heading H1 <span class="badge badge-secondary">New</span></h1>
<h2>Example heading H2 <span class="badge badge-secondary">New</span></h2>
<h3>Example heading H3 <span class="badge badge-secondary">New</span></h3>
<h4>Example heading H4 <span class="badge badge-secondary">New</span></h4>
<h5>Example heading H5 <span class="badge badge-secondary">New</span></h5>
<h6>Example heading H6 <span class="badge badge-secondary">New</span></h6>

Badge так же используется для декорации Button. Например один Button, пользователь нажимает на данный Button, чтобы скачать файл, Badge используется для отображения количества раз скачивания пользователями.

<button class="btn btn-primary">
  Download <span class="badge badge-light">5</span>
</button>

2. Badge (.badge-pill)

Использование класса .badge-pill помогает вашему Badge округлить 4 угла. Изображение ниже указывает на разницу между обычным Badge и Badge использующий класс .badge-pill:

.badge .badge-pill

<h1>
   News
   <span class="badge badge-primary">100</span>
</h1>
<h1>
   Comments
   <span class="badge badge-pill badge-primary">20K</span>
</h1>

Руководство Bootstrap Badge

1. Bootstrap Badge

2. Badge (.badge-pill)

Pуководства Bootstrap

Pуководства Bootstrap

Новейшие статьи