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

Bootstrap的徽章样式,通过添加类badge来实现。

目录

  • 01-往标题中添加徽章
  • 02-给按钮、链接添加徽章
  • 03-设置徽章的颜色
  • 04-设置胶囊形徽章

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>

运行效果如下:
Bootstrap的徽章样式设计,徽章常用作作为显示未读内容或动态计数内容_第1张图片

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>

运行效果如下:
Bootstrap的徽章样式设计,徽章常用作作为显示未读内容或动态计数内容_第2张图片

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>

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

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>

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

你可能感兴趣的:(Bootstrap,bootstrap,前端,html)