10Bootstrap5徽章

最新推荐文章于 2024-05-10 03:06:07 发布

心醉瑶瑾前

最新推荐文章于 2024-05-10 03:06:07 发布

阅读量241

点赞数

分类专栏： Bootstrap5 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_46452300/article/details/121846880

版权

Bootstrap5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

10Bootstrap5徽章

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5徽章</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--
徽章（Badges）主要用于突出显示新的或未读的项。
如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类
(如 .bg-secondary) 添加到 <span> 元素上即可。
徽章可以根据父元素的大小的变化而变化:
-->
<div class="container mt-3">
    <h2>徽章</h2>
    <h1>测试标题 <span class="badge bg-secondary">New</span></h1>
    <h2>测试标题 <span class="badge bg-secondary">New</span></h2>
    <h3>测试标题 <span class="badge bg-secondary">New</span></h3>
    <h4>测试标题 <span class="badge bg-secondary">New</span></h4>
    <h5>测试标题 <span class="badge bg-secondary">New</span></h5>
    <h6>测试标题 <span class="badge bg-secondary">New</span></h6>
</div>

<!--
各种颜色类型的徽章
以下列出了所有颜色类型的徽章:
-->
<div class="container mt-3">
    <h2>各种颜色类型的徽章</h2>
    <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">警告</span>
    <span class="badge bg-info">信息</span>
    <span class="badge bg-light">浅色</span>
    <span class="badge bg-dark">深色</span>
</div>
<!--
药丸形状徽章
使用 .rounded-pill 类来设置药丸形状徽章:
-->
<div class="container mt-3">
    <h2>药丸形状徽章</h2>
    <span class="badge rounded-pill bg-default">默认</span>
    <span class="badge rounded-pill bg-primary">主要</span>
    <span class="badge rounded-pill bg-success">成功</span>
    <span class="badge rounded-pill bg-info">信息</span>
    <span class="badge rounded-pill bg-warning">警告</span>
    <span class="badge rounded-pill bg-danger">危险</span>
</div>
<!--
徽章插入到元素内
以下实例将徽章嵌入到按钮内：
-->
<div class="container mt-3">
    <h2>徽章嵌入到按钮内</h2>
    <button type="button" class="btn btn-primary">
        Messages <span class="badge bg-danger">4</span>
    </button>
    <button type="button" class="btn btn-danger">
        Notifications <span class="badge bg-dark">7</span>
    </button>
</div>
</body>
</html>

在这里插入图片描述

心醉瑶瑾前

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
10Bootstrap5徽章

10Bootstrap5徽章<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5徽章</title> <link rel="sty
复制链接

扫一扫