Bootstrap 内联标签和徽章

简介

使用 Bootstrap，您可以创建内联标签（即 Label 和注释的文本）和徽章（即指标和未读计数）。

内联标签

通过内联标签您可以创建醒目的标签和注释文本。

实例

<div class="container">

    <div class="row">

        <div class="span12">

            <p><span class="label">默认</span></p>

            <p><span class="label label-success">成功</span></p>

            <p><span class="label label-warning">警告</span></p>

            <p><span class="label label-important">重要</span></p>

            <p><span class="label label-info">信息</span></p>

            <p><span class="label label-inverse">反选</span></p>

        </div>

    </div>

</div>

在线查看

bootstrap.css 中，从行号 3162 到行号 3200，呈现的是 label、label-success、label-warning、label-important、label-info 和 label-inverse 的样式。

徽章

就像 Bootstrap 提到的，

实例

<div class="container">

    <div class="row">

        <div class="span12">

            <p><span class="badge">1</span></p>

            <p><span class="badge badge-success">2</span></p>

            <p><span class="badge badge-warning">4</span></p>

            <p><span class="badge badge-important">6</span></p>

            <p><span class="badge badge-info">8</span></p>

            <p><span class="badge badge-inverse">10</span></p>

        </div>

    </div>

</div>

在线查看

请注意，在该实例中，我们使用了 bootstrap-2.0.3.css，因为在 Bootstrap v2.0.1 中没有定义徽章的样式。

点击这里，下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。