• 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

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

  • 相关阅读:
    SAP-S4 BP 业务伙伴（客户与供应商）管理后台配置
    数字孪生可视化平台多少钱？费用有哪些首选广州华锐互动
    python系列教程193——参数传递
    Windows11 Android开发相关记录（持续更新...）
    接雨水问题
    neo4j community与neo4j desktop冲突
    Flutter组件渲染集合的几种方式之详解与实战举例（更新）
    业务应用前端实战经验总结
    大数据存储架构详解：数据仓库、数据集市、数据湖、数据网格、湖仓一体
    Fabric.js 自定义选框样式
  • 原文地址：https://blog.csdn.net/wenhao_ir/article/details/133852570