知識(shí)點(diǎn)
標(biāo)簽
給標(biāo)簽添加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
徽章
給鏈接、導(dǎo)航等元素嵌套 <span class="badge"> 元素郑现，可以很醒目的展示新的或未讀的信息條目湃崩。
如果沒有新的或未讀的信息條目，也就是說不包含任何內(nèi)容接箫，徽章組件能夠自動(dòng)隱藏（通過CSS的 :empty 選擇符實(shí)現(xiàn)) 攒读。
Tips：徽章組件在 Internet Explorer 8 瀏覽器中不會(huì)自動(dòng)消失，因?yàn)?IE8 不支持 :empty 選擇符辛友。
<a href="#">Inbox <span class="badge">42</span></a>
實(shí)踐
<!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>組件-標(biāo)簽徽章</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">
<!--標(biāo)簽-->
<a href="#">新產(chǎn)品<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>
<!--徽章薄扁，通知消息的個(gè)數(shù)提示-->
<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>
