Bootstrap的徽章样式设计,徽章常用作作为显示未读内容或动态计数内容

Bootstrap的徽章样式，通过添加类badge来实现。徽章常用来显示计数值，如下图所示：
在这里插入图片描述

01-往标题中添加徽章

通常在标签添加类badge实现。
示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题中添加徽章title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">标题中添加徽章h3>
<h1>标题1 <span class="badge badge-secondary">徽章span>h1>
<h2>标题2 <span class="badge badge-secondary">徽章span>h2>
<h3>标题3 <span class="badge badge-secondary">徽章span>h3>
<h4>标题4 <span class="badge badge-secondary">徽章span>h4>
<h5>标题5 <span class="badge badge-secondary">徽章span>h5>
<h6>标题6 <span class="badge badge-secondary">徽章span>h6>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行效果如下：
在这里插入图片描述

02-给按钮、链接添加徽章

示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>按钮、链接中添加徽章title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3>按钮、链接中添加徽章h3>
<button type="button" class="btn btn-primary">
    按钮<span class="badge badge-light ml-4">1span>
button>
<button type="button" class="btn btn-danger">
    按钮<span class="badge badge-light ml-4">2span>
button>
<a href="#" class="btn btn-success"">
    链接<span class="badge badge-light ml-4">3span>
button>
<a href="#" class="btn btn-warning">
    链接<span class="badge badge-light ml-4">4span>
a>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

运行效果如下：
在这里插入图片描述

03-设置徽章的颜色

示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置徽章的颜色title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">设置徽章的颜色h3>
<span class="badge badge-primary">主要span>
<span class="badge badge-secondary">次要span>
<span class="badge badge-success">成功span>
<span class="badge badge-danger">危险span>
<span class="badge badge-warning">警告span>
<span class="badge badge-info">信息span>
<span class="badge badge-light">明亮span>
<span class="badge badge-dark">深色span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

运行效果如下：
在这里插入图片描述

04-设置胶囊形徽章

可以使用类badge-pill实现胶囊形徽章。
示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>胶囊形徽章title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">胶囊形徽章h3>
<span class="badge badge-pill badge-primary">主要span>
<span class="badge badge-pill badge-secondary">次要span>
<span class="badge badge-pill badge-success">成功span>
<span class="badge badge-pill badge-danger">危险span>
<span class="badge badge-pill badge-warning">警告span>
<span class="badge badge-pill badge-info">信息span>
<span class="badge badge-pill badge-light">明亮span>
<span class="badge badge-pill badge-dark">深色span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

运行效果如下：
在这里插入图片描述

相关阅读:
PROFINET 建立连接的原理
 【马士兵】Python基础--07
10_10C++
Dubbo 2.6.1升级
 使用Java拓展本地开源大模型的网络搜索问答能力
 开发 integration 云云对接
 保障人脸安全！顶象发布《人脸识别安全白皮书》
Linux 基础命令&进阶
 瑞康医药与亚马逊云科技达成战略合作，全国上百家子公司业务上云
 用C语言随机读写二进制文件
原文地址：https://blog.csdn.net/wenhao_ir/article/details/133852570

Bootstrap的徽章样式设计,徽章常用作作为显示未读内容或动态计数内容

目录

01-往标题中添加徽章

02-给按钮、链接添加徽章

03-设置徽章的颜色

04-设置胶囊形徽章