Bootstrap - Жетоны: Добавление стиля вашим веб-элементам

Здравствуйте,野心勃勃ые веб-разработчики! Сегодня мы окунемся в захватывающий мир жетонов Bootstrap. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы провести вас через это путешествие шаг за шагом. Так что возьмите любимый напиток, устройтесь поудобнее, и давайте отправимся в это приключение вместе!

Что такое жетоны Bootstrap?

Жетоны - это小小的 счетные и標籤组件，可以为您的网页元素添加额外信息。 Они как крошечные цифровые наклейки, которые могут сделать ваш веб-сайт более информативным и визуально привлекательным. Представьте, что вы создаете социальную сеть, и хотите показать, сколько непрочитанных сообщений у пользователя - вот где жетоны могут пригодиться!

Пример базового жетона

Давайте начнем с простого примера:

<h1>Добро пожаловать на MySpace 2.0 <span class="badge bg-secondary">Новинка</span></h1>

В этом примере мы добавили жетон рядом с是我们的标题。 Элемент span с классами badge и bg-secondary создает маленький серый жетон с надписью "Новинка". Это как наклеить наклейку "Новинка!" на продукт в магазине - это привлекает внимание!

Жетоны в действии

Жетоны с кнопками

Жетоны можно использовать с кнопками, чтобы предоставить дополнительную информацию. Вот пример:

<button type="button" class="btn btn-primary">
Уведомления <span class="badge bg-secondary">4</span>
</button>

Этот код создает кнопку с надписью "Уведомления" и маленьким жетоном, показывающим число 4. Это идеально подходит для показа, сколько непрочитанных уведомлений у пользователя!

Жетоны для уведомлений

Говоря о уведомлениях, давайте посмотрим, как мы можем использовать жетоны для создания иконки уведомлений:

<i class="bi bi-bell-fill position-relative">
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">непрочитанные сообщения</span>
</span>
</i>

Этот код создает колокольчик с красным жетоном, показывающим "99+". Элемент visually-hidden предназначен для экранных readers, делая наш сайт более доступным.

Позиционирование жетонов

Жетоны можно располагать по-разному. Давайте рассмотрим несколько примеров:

<button type="button" class="btn btn-primary position-relative">
Входящие
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">непрочитанные сообщения</span>
</span>
</button>

Этот код располагает жетон в правом верхнем углу кнопки. Это как наклеить липучку на угол книги!

Жетоны в качестве индикаторов

Жетоны также можно использовать в качестве индикаторов:

<button type="button" class="btn btn-primary position-relative">
Профиль
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">новые уведомления</span>
</span>
</button>

Этот код создает маленький красный точечный индикатор на кнопке - идеально подходит для показа, что что-то новое, не указывая число.

Настройка цветов жетонов

Bootstrap предоставляет множество фоновых цветов для жетонов. Вот таблица доступных классов:

Класс	Описание
bg-primary	Синий жетон
bg-secondary	Серый жетон
bg-success	Зелёный жетон
bg-danger	Красный жетон
bg-warning	Желтый жетон
bg-info	Светло-синий жетон
bg-light	Белый жетон
bg-dark	Черный жетон

Вы можете использовать эти классы следующим образом:

<span class="badge bg-primary">Основной</span>
<span class="badge bg-secondary">Второстепенный</span>
<span class="badge bg-success">Успех</span>
<span class="badge bg-danger">Опасность</span>
<span class="badge bg-warning text-dark">Предупреждение</span>
<span class="badge bg-info text-dark">Информация</span>
<span class="badge bg-light text-dark">Светлый</span>
<span class="badge bg-dark">Темный</span>

Жетоны в виде таблеток

Если вы хотите, чтобы ваши жетоны имели закругленные концы, вы можете использовать класс rounded-pill:

<span class="badge rounded-pill bg-primary">Основной</span>
<span class="badge rounded-pill bg-secondary">Второстепенный</span>
<span class="badge rounded-pill bg-success">Успех</span>

Эти жетоны в виде таблеток отлично подходят для тегов или меток!

Все вместе

Теперь, когда мы рассмотрели все эти концепции, давайте создадим более сложный пример, который incorporates несколько типов жетонов:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySpace 2.0</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Главная
<span class="badge bg-primary rounded-pill">Новинка</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Сообщения
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">непрочитанные сообщения</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Уведомления
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle">
<span class="visually-hidden">новые уведомления</span>
</span>
</a>
</li>
</ul>
</div>
</nav>

Этот код создает панель навигации с тремя элементами: Главная (с жетоном "Новинка"), Сообщения (с жетоном с числом) и Уведомления (с индикаторным жетоном). Это как создать панель управления для космического корабля - каждый жетон предоставляет пользователю важную информацию одним взглядом!

И вот и все,folks! Мы explored мир жетонов Bootstrap, от простых меток до сложных уведомлений. Помните, как и любое средство в веб-разработке, ключевым моментом является использование жетонов с умом. Они великолепны для привлечения внимания, но слишком много могут сделать ваш сайт загроможденным.

Заканчивая, я вспомнил студента, который однажды сказал: "Жетоны как посыпка на капкейке - они делают все более интересным!" И я не могу с ним не согласиться. Так что前进, экспериментируйте и добавляйте немного badge-tastic стиля на ваши веб-сайты!

Credits: Image by storyset