Bootstrap徽章样式

最新推荐文章于 2025-05-13 15:57:55 发布

原创最新推荐文章于 2025-05-13 15:57:55 发布 · 323 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html #前端

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Bootstrap框架中的徽章元素，包括如何在下拉列表中使用徽章以及结合进度条展示信息的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

徽章

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<a href="#">
					<span class="glyphicon glyphicon-envelope"></span>
					未读邮件（<span class="badge">12</span>）
				</a>
			</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

徽章放入下拉列表中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
	<div class="container">
		<div class="dropdown">
			<button type="button" data-toggle="dropdown" class="btn btn-info">
				<a href="#">
					<span class="glyphicon glyphicon-envelope"></span>
					未读邮件（<span class="badge">12</span>）<span class="caret"></span>
				</a>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">
					<span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;群邮件(<span class="badge">3</span>)
				</a></li>
				<li><a href="#">
					<span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;垃圾邮件(<span class="badge">7</span>)
				</a></li>
				<li><a href="#">
					<span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;亲密邮件(<span class="badge">2</span>)
				</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

进度条

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<div class="progress progress-striped active">
					<div class="progress-bar progress-bar-success" style="width: 85%">85%</div>
				</div>
				<div class="progress progress-striped active">
					<div class="progress-bar progress-bar-info" style="width: 85%">85%</div>
				</div>
				<div class="progress progress-striped active">
					<div class="progress-bar progress-bar-primary style="width: 85%">85%</div>
				</div>
				<div class="progress progress-striped active">
					<div class="progress-bar progress-bar-danger" style="width: 85%">85%</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述