Bootstrap - 徽章示例

徽章是什么？

你好，未来的网页开发者们！今天，我们将一起探索Bootstrap徽章的精彩世界。作为你亲切的邻居电脑老师，我在这里引导你开始这段旅程，即使你之前从未编写过一行代码。所以，拿起你的虚拟背包，让我们一起踏上这段冒险之旅！

Bootstrap - Badges Demo

在Bootstrap中，徽章就像是可以添加到网页上的数字贴纸。它是一个小型的，通常是圆形或药丸形状的元素，用于突出显示或展示附加信息。把它想象成你在手机应用程序上看到的小通知气泡的网络版——它们吸引眼球且信息丰富！

现实世界的类比

想象你穿着童子军制服。袖子上的徽章代表你的成就，对吧？Bootstrap徽章在数字世界中以类似的方式工作。它们可以显示数字（如未读消息）、状态（新消息、促销等），或者简单地为你网页添加视觉兴趣。

开始使用Bootstrap徽章

在我们跳入代码之前，让我们确保我们已经设置了Bootstrap。别担心，这比在露营旅行中搭建帐篷要简单！

设置Bootstrap

要使用Bootstrap，我们需要在我们的HTML中包含其CSS和JavaScript文件。下面是如何操作的：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 徽章示例</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的内容放在这里 -->

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

这就像是为我们的徽章表演设置舞台。我们已经链接到Bootstrap的CSS和JavaScript文件，这让我们可以使用Bootstrap的所有好东西，包括徽章。

基本徽章用法

现在我们已经设置完毕，让我们创建我们的第一个徽章！

简单徽章示例

<h1>欢迎来到我的博客 <span class="badge bg-secondary">新</span></h1>

在这个示例中，我们在标题旁边添加了一个徽章。带有类badge和bg-secondary的span元素创建了一个简单的灰色徽章，显示文本“新”。

解释

<span>: 这是一个内联容器，用于标记文本的一部分。
class="badge": 这个Bootstrap类将我们的span变成了一个徽章。
bg-secondary: 这为我们的徽章添加了一个灰色背景。

徽章颜色

Bootstrap为你的徽章提供了彩虹般的颜色。让我们来探索它们！

<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>

这些徽章各有不同的颜色，非常适合传达不同的意义或只是让你的页面更加多彩！

颜色意义表

颜色	典型用途
主要	主要操作或信息
次要	较不重要的信息
成功	正面操作或消息
危险	警告或错误消息
警告	谨慎信息
信息	中性信息消息
浅色	微妙背景或较少强调
深色	高对比度或重要信息

药丸徽章

想让你的徽章看起来更圆一些吗？来认识药丸徽章！

<span class="badge rounded-pill bg-primary">药丸徽章</span>

通过添加rounded-pill类，我们将普通徽章变成了药丸形状。就像给你的徽章做了一个改造！

按钮中的徽章

徽章还可以用在按钮中，创造出一些非常酷的效果。让我们试试看：

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

这会创建一个写着“消息”的按钮，旁边有一个显示数字4的小徽章。这非常适合显示未读消息数量等！

定位徽章

有时，你希望你的徽章相对于另一个元素定位。Bootstrap让这变得简单，有定位徽章：

<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>

这会创建一个按钮，在右上角有一个稍微覆盖按钮的徽章。就像你按钮圣代上的樱桃！

分析

position-relative: 使按钮成为徽章定位的上下文。
position-absolute: 在按钮内绝对定位徽章。
top-0 start-100: 将徽章定位在右上角。
translate-middle: 移动徽章以获得更好的视觉对齐。
visually-hidden: 为屏幕阅读器提供文本，但在视觉上不显示。

结论

好了，伙计们！我们已经穿越了Bootstrap徽章的土地，从简单的彩色徽章到药丸形状的徽章，甚至是在按钮上定位的徽章。记住，徽章就像是你网页设计食谱中的调味料——明智地使用它们，为你的页面添加恰到好处的风味！

实践出真知，所以不要害怕尝试不同的组合。谁知道呢？你可能会用你创意的使用徽章创造出下一个网页设计的大趋势！

快乐编码，愿你的徽章永远明亮，你的工具提示总是信息丰富！

Credits: Image by storyset