Bootstrap - Badges Demo

Что такое значок?

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

Значок в Bootstrap resembles a digital sticker you can add to your web page. It's a small, often circular or pill-shaped element used to highlight or display additional information. Think of it as the web equivalent of those little notification bubbles you see on your phone apps – they're eye-catching and informative!

Реальный мир аналогии

Представьте, что вы носитеuniform Scout. Значки на вашем рукаве представляют ваши достижения, верно? Bootstrap badges work similarly in the digital world. They can show numbers (like unread messages), status (new, sale, etc.), or simply add visual interest to your web page.

Начало работы с Bootstrap Badges

Прежде чем мы перейдем к коду, убедимся, что у нас настроен Bootstrap. Не волнуйтесь; это проще, чем ставить палатку в походе!

Настройка Bootstrap

Чтобы использовать Bootstrap, нам нужно включить его CSS и JavaScript файлы в наш HTML. Вот как это делается:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Badges Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content goes here -->

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Это как preparing the stage for our badge performance. We've linked to Bootstrap's CSS and JavaScript files, which give us access to all the Bootstrap goodies, including badges.

Основное использование значков

Теперь, когда мы все настроили, давайте создадим наш первый значок!

Простой пример значка

<h1>Welcome to my blog <span class="badge bg-secondary">New</span></h1>

В этом примере мы добавили значок рядом с нашим заголовком. Элемент span с классами badge и bg-secondary создает простой серый значок с текстом "New".

Объяснение

<span>: Это инлайновый контейнер, используемый для пометки части текста.
class="badge": Этот класс Bootstrap превращает наш span в значок.
bg-secondary: Это добавляет серый фоновый цвет нашему значку.

Цвета значков

Bootstrap предлагает радугу цветов для ваших значков. Давайте их рассмотрим!

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

Each of these badges has a different color, perfect for conveying different meanings or just making your page more colorful!

Таблица значений цветов

Цвет	Типичное использование
Primary	Основные действия или информация
Secondary	Менее важная информация
Success	Положительные действия или сообщения
Danger	Предупреждения или сообщения об ошибках
Warning	Предостерегающая информация
Info	Нейтральные информационные сообщения
Light	Subtle backgrounds or less emphasis
Dark	Высококонтрастный или важная информация

Пилюлевидные значки

Хотите сделать свои значки немного более rounded? Встречайте пилюлевидные значки!

<span class="badge rounded-pill bg-primary">Pill Badge</span>

Добавив класс rounded-pill, мы transform our regular badge into a pill-shaped one. It's like giving your badge a makeover!

Значки в кнопках

Значки также можно использовать внутри кнопок, чтобы создать некоторые классные эффекты. Давайте попробуем:

<button type="button" class="btn btn-primary">
Messages <span class="badge bg-secondary">4</span>
</button>

This creates a button that says "Messages" with a small badge showing the number 4. It's perfect for showing things like unread message counts!

Позиционированные значки

Иногда вы хотите, чтобы ваш значок был positioned relative к другому элементу. Bootstrap делает это легко с позиционированными значками:

<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>

This creates a button with a badge positioned at the top-right corner, slightly overlapping the button. It's like the cherry on top of your button sundae!

Разбор по частям

position-relative: Makes the button a positioning context for the badge.
position-absolute: Positions the badge absolutely within the button.
top-0 start-100: Positions the badge at the top-right corner.
translate-middle: Shifts the badge for better visual alignment.
visually-hidden: Provides text for screen readers without displaying it visually.

Заключение

И вот мы и добрались до этого,folks! We've journeyed through the land of Bootstrap badges, from simple colored badges to pill-shaped ones, and even positioned badges on buttons. Remember, badges are like the seasoning in your web design recipe – use them wisely to add just the right amount of flavor to your pages!

Practice makes perfect, so don't be afraid to experiment with different combinations. Who knows? You might just create the next big trend in web design with your creative use of badges!

Happy coding, and may your badges always be bright and your tooltips always informative!

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - Демо модалей

Следующий учебник:

Bootstrap - Демонстрация хлебных крошек