Bootstrap组件 - 标签、徽章
2017-06-15 本文已影响33人
蝴蝶结199007
知识点
标签
给标签添加class .label、.label-default
<h3>Example heading <span class="label label-default">New</span></h3>
可用的变体：
.label-default
.label-primary
.label-success
.label-info
.label-warning
.label-danger
徽章
给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。
如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的 :empty 选择符实现) 。
Tips：徽章组件在 Internet Explorer 8 浏览器中不会自动消失，因为 IE8 不支持 :empty 选择符。
<a href="#">Inbox <span class="badge">42</span></a>
实践
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>组件-标签徽章</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<!--标签-->
<a href="#">新产品<span class="label label-default">hot</span></a>
<br/>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<div class="line"></div>
<!--徽章，通知消息的个数提示-->
<a href="#">新消息<span class="badge">7</span></a>
<button class="btn btn-default">新消息<span class="badge">7</span></button>
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
</div>
</body>
</html>
