Как создать значки с помощью Bootstrap 5?

Значки — это текстовые поля с цветом фона, которые можно использовать для разных целей. С точки зрения конечного пользователя эти значки обычно полезны для выделения определенного содержимого в блоке текста. Администраторы используют значки для демонстрации незавершенных задач, что-то вроде уведомления, отображаемого в приложениях iOS. Bootstrap 5 позволяет создавать значки несколькими способами, давайте объясним все возможные способы с помощью кода и демонстрации.

Значки начальной загрузки по умолчанию

Начиная с версии 4 Bootstrap, метки и значки объединены как значки. Ранее эти компоненты также назывались тегами. Вы должны использовать базовый CSS-класс «badge», чтобы идентифицировать любой HTML-элемент как значок. Например, вы можете использовать класс значка с текстовыми элементами, такими как заголовки и абзацы, чтобы добавить метку рядом с содержимым. Ниже приведен код для создания значков по умолчанию в Bootstrap рядом с заголовками.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Badges -->
<h1>This is H1 Heading <span class="badge badge-default">New</span></h1>
<h2>This is H2 Heading <span class="badge badge-default">New</span></h2>
<h3>This is H3 Heading <span class="badge badge-default">New</span></h3>
<h4>This is H4 Heading <span class="badge badge-default">New</span></h4>
<h5>This is H5 Heading <span class="badge badge-default">New</span></h5>
<h6>This is H6 Heading <span class="badge badge-default">New</span></h6>
<!-- End of Badges -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Значки Bootstrap по умолчанию будут выглядеть следующим образом:

Значки начальной загрузки по умолчанию

Контекстные цветные значки Bootstrap

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

Значки Bootstrap 4 по умолчанию

Ниже приведен блок кода для контекстных значков:

<p class="badge badge-secondary">Secondary Badge</p>
<p class="badge badge-primary">Primary Badge</p>
<p class="badge badge-success">Success Badge</p>
<p class="badge badge-info">Info Badge</p>
<p class="badge badge-warning">Warning Badge</p>
<p class="badge badge-danger">Danger Badge</p>
<p class="badge badge-light">Light Badge</p>
<p class="badge badge-dark">Dark Badge</p>

Цветные значки-таблетки Bootstrap

По умолчанию значки имеют квадратную форму с небольшим радиусом по углам. Если вам нужны значки с закругленными углами в форме таблеток, просто используйте класс «badge-pill», как показано ниже:

<p class="badge badge-pill badge-secondary">Secondary Pill Badge</p>
<p class="badge badge-pill badge-primary">Primary Pill Badge</p>
<p class="badge badge-pill badge-success">Success Pill Badge</p>
<p class="badge badge-pill badge-info">Info Pill Badge</p>
<p class="badge badge-pill badge-warning">Warning Pill Badge</p>
<p class="badge badge-pill badge-danger">Danger Pill Badge</p>
<p class="badge badge-pill badge-light">Light Pill Badge</p>
<p class="badge badge-pill badge-dark">Dark Pill Badge</p>

Значки таблеток в браузере будут выглядеть следующим образом:

Значок таблетки Bootstrap 4

Значок со счетчиком

Версия Bootstrap 4.0 позволяет создавать значки со счетчиками по умолчанию, как показано ниже.

Значок со счетчиками

Ниже приведен код значка со счетчиком:

<button class="btn">
Total Emails <span class="badge badge-secondary">200</span>
</button><br><br>
<button class="btn">
Unread Emails <span class="badge badge-danger">100</span>
</button><br><br>
<button class="btn">
Read Emails <span class="badge badge-success">100</span>
</button>

Это не все

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

Значок, используемый внутри текста абзаца

Также вы можете добавить впереди отличные иконки шрифтов и использовать их как кнопки с иконками. Помните, что для использования этих значков вы должны добавить на свою страницу ссылку на отличный CSS-шрифт.

<p style="font-size:2rem;"><span class="badge badge-info"><i class="fa fa-camera-retro"></i> Take a Picture</span></p>
<p style="font-size:2rem;"><span class="badge badge-warning"><i class="fa fa-shower"></i> Take a Shower</span></p>
<p style="font-size:2rem;"><span class="badge badge-primary"><i class="fa fa-dollar"></i> Donate a Dollar</span></p>
<p style="font-size:2rem;"><span class="badge badge-danger"><i class="fa fa-twitter"></i> Send a Tweet</span></p>
<p style="font-size:2rem;"><span class="badge badge-secondary"><i class="fa fa-youtube"></i> Watch a Video</span></p>
<p style="font-size:2rem;"><span class="badge badge-success"><i class="fa fa-file"></i> Upload a File</span></p>
<p style="font-size:2rem;"><span class="badge badge-light"><i class="fa fa-facebook"></i> Connect with Facebook</span></p>
<p style="font-size:2rem;"><span class="badge badge-dark"><i class="fa fa-twitter"></i> Follow in Twitter</span></p>

Это даст результат, как показано ниже, в браузере:

Значок с иконками Font Awesome

Если вы не хотите использовать значки внешнего шрифта, теперь Bootstrap 5 поставляется со встроенными шрифтами, как мы объяснили в начальном шаблоне. Вы должны включить файл CSS значков Bootstrap и использовать класс CSS, как показано ниже, для вставки значков шрифтов со значками.

<i class="bi bi-check-circle-fill"></i>
<p class="badge badge-success">Success Badge</p>

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.