Bootstrap basic tutorial

Bootstrap plugins

Bootstrap 标签

This chapter will explain Bootstrap labels. Labels can be used for counting, tips, or other marking displays on the page. Use class .label To display labels, as shown in the following examples:

Online examples

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Labels</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h4>Example Heading <span class="label label-default">Label</span></h4>
</body>
</html>

测试看看 ‹/›

结果如下所示：

You can use decorated classes label-default, label-primary, label-success, label-info, label-warning, label-danger To change the appearance of labels, as shown in the following examples:

Online examples

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Variants of label</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<span class="label label-default">Default label</span>
<span class="label label-primary">Primary label</span>
<span class="label label-success">Success label</span>
<span class="label label-info">Information label</span>
<span class="label label-attention">Attention label</span>
<span class="label label-danger">标签</span>
</body>
</html>

测试看看 ‹/›

结果如下所示：

标签更多示例

类	描述	示例
.label label-default	默认的灰色标签	尝试一下
.label label-success	类型为 "success" 的绿色标签	尝试一下
.label label-warning	类型为 "warning" 的黄色标签	尝试一下

Bootstrap 徽章 Bootstrap 分页