Bootstrap badge(徽章) 与 label(标记) 样式
badge
badge（徽章）是与链接关联的项目数量的数字指示器:
数字 (5, 10, 与 2) 都是 badge（徽章）。
使用 .badge 样式与 <span> 元素来创建徽章:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>badge 样式</h2><a href="#">News <span class="badge">5</span></a><br><a href="#">Comments <span class="badge">10</span></a><br><a href="#">Updates <span class="badge">2</span></a></div></body></html>
徽章也可以用于其他元素，如按钮:
下面的实例演示如何向按钮添加徽章:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>按钮上的徽章</h2><button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button><button type="button" class="btn btn-success">Success <span class="badge">3</span></button><button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button></div></body></html>
Label（标签）
标签用于提供有关某事物的附加信息:
Example New
Example New
Example New
Example New
Example New
使用 .label 类，然后是带有 6 个上下文样式类（.label-default, .label-primary, .label-success, .label-info, .label-warning or .label-danger）中的 1 个的 <span> 元素来创建一个标签:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Labels</h2><h1>Example <span class="label label-default">New</span></h1><h2>Example <span class="label label-default">New</span></h2><h3>Example <span class="label label-default">New</span></h3><h4>Example <span class="label label-default">New</span></h4><h5>Example <span class="label label-default">New</span></h5><h6>Example <span class="label label-default">New</span></h6></div></body></html>
以下实例显示了所有上下文标签类:
Default Label Primary Label Success Label Info Label Warning Label Danger Label
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>上下文标签样式类</h2><p>上下文样式类可用于为标签添加颜色</p><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">Info Label</span><span class="label label-warning">Warning Label</span><span class="label label-danger">Danger Label</span></div></body></html>