- 徽章：
class="badge" - 标签：
class="label"
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Badges and Labels</title>
<script>
function showHTMLContent(showElement, codeElement) {
$(showElement).html($('<div/>').text($(codeElement).html()).html());
}
$(function() {
showHTMLContent('#displayTestBadge', '#testBadge');
showHTMLContent('#displayTestLabel', '#testLabel');
$(":radio").click(function() {
$("#labelTest").attr("class", $(this).val());
showHTMLContent('#displayTestLabel', '#testLabel');
});
});
</script>
</head>
<body>
<div class="container">
<h1>徽章(Badge)</h1>
<h2>代码</h2>
<pre id="displayTestBadge"></pre>
<h2>样式</h2>
<div id="testBadge">
<a href="#">未读消息 <span class="badge">5</span></a><br><br>
<button type="button" class="btn btn-primary">评论 <span class="badge">12</span></button>
</div>
<br><br>
<h1>标签(Label)</h1>
<h2>选择样式</h2>
<form>
<input type="radio" name="style" value="label label-default" checked> label label-default <br>
<input type="radio" name="style" value="label label-primary"> label label-primary <br>
<input type="radio" name="style" value="label label-success"> label label-success <br>
<input type="radio" name="style" value="label label-info"> label label-info <br>
<input type="radio" name="style" value="label label-warning"> label label-warning <br>
<input type="radio" name="style" value="label label-danger"> label label-danger <br>
</form>
<h2>代码</h2>
<pre id="displayTestLabel"></pre>
<h2>样式</h2>
<div id="testLabel">
<h3>测试Label <span id="labelTest" class="label label-default">Label</span></h3>
</div>
</div>
</body>
</html>