集册 Bootstrap 插件 Bootstrap 内联标签和徽章

Bootstrap 内联标签和徽章

Xebcnor     最近更新时间:2019-10-11 02:42:17

340

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 提到的,

徽章是用于显示指标或一些分类的计数的小而简单的组件。它们通常可以在用于推送通知的电子邮件客户端比如 Mail.app 或移动 app 上找到。

实例

展开阅读全文