免费AI编程助手
Bootstrap 标签和徽章
2018-03-03 15:27 更新
我们可以使用标签在其他组件旁边显示短文本。
要显示标签，你需要添加一个label类以内联HTML元素，例如 span 和 i 。在这里，我们将使用span在 h3 元素旁显示一个标签：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body style="margin:30px">
<h3>Jump Start Bootstrap <span class="label label-default"> tutorial.</span></h3>
</body>
</html>上下文标签
可用的标签类型有：
- label-default为灰色
- label-primary为深蓝色
- label-success为绿色
- label-info为浅蓝色
- label-warning为橙色
- label-danger为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Inline Labels</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<p>This is a <span class="label label-default">Default</span> label.</p>
<p>This is a <span class="label label-primary">Primary</span> label.</p>
<p>This is a <span class="label label-success">Success</span> label.</p>
<p>This is an <span class="label label-info">Info</span> label.</p>
<p>This is an <span class="label label-warning">Warning</span> label.</p>
<p>This is an <span class="label label-danger">Danger</span> label.</p>
</div>
</body>
</html>徽章
我们可以使用徽章来显示未读邮件的数量。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="active"><a href="#">Messages <span class="badge">24</span></a></li>
<li><a href="#">Email <span class="badge">5</span></a></li>
</ul>
</div>
</body>
</html>以上内容是否对您有帮助：
更多建议：