Bootstrap - Huy hiệu Demo
什么是徽章？
你好，未来的网页开发者们！今天，我们将要进入Bootstrap徽章的精彩世界。作为你亲切的计算机老师邻居，我在这里引导你开始这段旅程，即使你之前从未编写过一行代码。所以，拿起你的虚拟背包，让我们一起开始冒险吧！
在Bootstrap中，徽章就像是你可以在网页上添加的数字贴纸。它是一个小型的，通常是圆形或药丸形状的元素，用于突出显示或展示额外信息。把它想象成你在手机应用程序上看到的小通知气泡的网络版——它们吸引眼球且信息丰富！
现实世界类比
想象你穿着童子军制服。袖子上的徽章代表你的成就，对吧？Bootstrap徽章在数字世界中的工作方式类似。它们可以显示数字（如未读消息），状态（新，促销等），或者简单地为你的网页添加视觉兴趣。
开始使用Bootstrap徽章
在我们跳入代码之前，让我们确保我们已经设置了Bootstrap。别担心，这比在露营旅行中搭帐篷要简单！
设置Bootstrap
要使用Bootstrap，我们需要在我们的HTML中包含其CSS和JavaScript文件。以下是如何操作的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 徽章 Demo</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