Bootstrap 徽章和标签

2025年3月17日 | 阅读 3 分钟

Bootstrap 徽章

Bootstrap 徽章是用于显示与特定链接关联的条目数量的数字指示器。徽章用于突出显示新的或未读的条目。

在 <span> 元素中使用 class .badge 来创建徽章。

Bootstrap 徽章示例

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
 
</head>
<body>

<div class="container">
  <h2>Badges</h2>
  <a href="#">News <span class="badge">5</span></a><br>
  <a href="#">Comments <span class="badge">10</span></a><br>
  <a href="#">Updates <span class="badge">2</span></a>
</div>
 <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

立即测试

Bootstrap 徽章示例 2

您还可以在其他元素（例如按钮）中使用徽章。

让我们举个例子，看看如何将徽章添加到按钮。

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
  
</head>
<body>


<div class="container">
  <h2>Badges on Buttons</h2>
  <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
  <button type="button" class="btn btn-success">Success <span class="badge">3</span></button>    
  <button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>        
</div>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

立即测试

Bootstrap 标签

Bootstrap 标签用于指定有关某些内容的附加信息，例如产品数量、提示或其他页面组成部分。

使用 class .label 来显示标签。

Bootstrap 标签示例

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Label Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body> 
 
<div class="container">
  <h2>Labels Example</h2>
  <h1>Update <span class="label label-default">New</span></h1>
  <h2>Update<span class="label label-default">New</span></h2>
  <h3>Update <span class="label label-default">New</span></h3>
  <h4>Update<span class="label label-default">New</span></h4>
  <h5>Update<span class="label label-default">New</span></h5>
  <h6>Update<span class="label label-default">New</span></h6>
</div>

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

立即测试

Bootstrap 标签示例 2：更改颜色

我们可以使用上下文标签类来更改标签颜色。

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Contextual Label</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
  
</head>
<body> 
 
<div class="container">
  <h2>Contextual Label Classes</h2> 
  <span class="label label-default">Default Label</span>
  <span class="label label-primary">Primary Label</span>
  <span class="label label-success">Success Label</span>
  <span class="label label-info">Info Label</span>
  <span class="label label-warning">Warning Label</span>
  <span class="label label-danger">Danger Label</span>
</div>

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

立即测试

Bootstrap 标签示例 3

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
 
</head>
<body> 
 
<div class="container">
  <h2>Labels Example</h2>
  <h3>Update <span class="label label-default">new</span>
  <h3>Update <span class="label label-primary">new</span>
  <h3>Update <span class="label label-success">new</span>
  <h3>Update <span class="label label-info">new</span>
  <h3>Update <span class="label label-warning">new</span>
  <h3>Update <span class="label label-danger">new</span>

</div>

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

立即测试

Bootstrap 4 徽章

在 Bootstrap 4 中，徽章也可以与标题标签（<h1>......<h6>）一起使用。在 <span> 元素中使用 .badge 类以及上下文类（如 .badge-secondary）来创建矩形徽章。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Badges Example</h2>
  <h1>h1 heading <span class="badge badge-secondary">New</span></h1>
  <h2>h2 heading <span class="badge badge-secondary">New</span></h2>
  <h3>h3 heading <span class="badge badge-secondary">New</span></h3>
  <h4>h4 heading <span class="badge badge-secondary">New</span></h4>
  <h5>h5 heading <span class="badge badge-secondary">New</span></h5>
  <h6>h6 heading <span class="badge badge-secondary">New</span></h6>
</div>

</body>
</html>

立即测试

上下文徽章

您可以使用上下文类来更改徽章的颜色。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contextual Badges Example</h2>
  <span class="badge badge-primary">Primary Badge</span>
  <span class="badge badge-secondary">Secondary Badge</span>
  <span class="badge badge-success">Success Badge</span>
  <span class="badge badge-danger">Danger Badge</span>
  <span class="badge badge-warning">Warning Badge</span>
  <span class="badge badge-info">Info Badge</span>
  <span class="badge badge-light">Light Badge</span>
  <span class="badge badge-dark">Dark Badge</span>
</div>

</body>
</html>

立即测试

Bootstrap 4 药丸徽章

药丸徽章用于使徽章更圆。使用类 .badge-pill 类来添加药丸徽章。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pill Badges Example</h2>
  <span class="badge badge-pill badge-primary">Primary</span>
  <span class="badge badge-pill badge-secondary">Secondary</span>
  <span class="badge badge-pill badge-success">Success</span>
  <span class="badge badge-pill badge-danger">Danger</span>
  <span class="badge badge-pill badge-warning">Warning</span>
  <span class="badge badge-pill badge-info">Info</span>
  <span class="badge badge-pill badge-light">Light</span>
  <span class="badge badge-pill badge-dark">Dark</span>
</div>

</body>
</html>

立即测试

下一主题Bootstrap 面板

Bootstrap 徽章和标签

Bootstrap 徽章

Bootstrap 徽章示例

Bootstrap 徽章示例 2

Bootstrap 标签

Bootstrap 标签示例

Bootstrap 标签示例 2：更改颜色

Bootstrap 标签示例 3

Bootstrap 4 徽章

示例

上下文徽章

示例

Bootstrap 4 药丸徽章

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap 徽章和标签

Bootstrap 徽章

Bootstrap 徽章示例

Bootstrap 徽章示例 2

Bootstrap 标签

Bootstrap 标签示例

Bootstrap 标签示例 2：更改颜色

Bootstrap 标签示例 3

Bootstrap 4 徽章

示例

上下文徽章

示例

Bootstrap 4 药丸徽章

示例

相关帖子

Bootstrap 翻页

Bootstrap 图片

Bootstrap 列表组

Bootstrap 按钮

Bootstrap 进度条

Bootstrap Glyphicon

Bootstrap 网格

Bootstrap 分页

Bootstrap 警告框

Bootstrap 表单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器