Bootstrap—标签label和徽章badge

最新推荐文章于 2025-07-28 06:09:10 发布

原创最新推荐文章于 2025-07-28 06:09:10 发布 · 5.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap #label #标签

Bootstrap 同时被 2 个专栏收录

17 篇文章

订阅专栏

Bootstrap学习之路

17 篇文章

订阅专栏

本文介绍了Bootstrap中的标签(label)和徽章(badge)的使用，包括.label-default、.label-primary、.label-success、.label-info、.label-warning和.label-danger等不同类型的标签样式，并提供了HTML示例代码。同时，也展示了徽章(badge)在突出显示新或未读项的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

label
.label label-default    默认的灰色标签
.label label-primary   "primary" 类型的蓝色标签
.label label-success   "success" 类型的绿色标签
.label label-info  "info" 类型的浅蓝色标签
.label label-warning   "warning" 类型的黄色标签
.label label-danger    "danger" 类型的红色标签

用法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
    <div class="container" style="margin-top: 10px">
        <span class="label label-default">label-default</span>
    </div>
</body>
</html>

效果：


badge:
徽章（Badges）主要用于突出显示新的或未读的项，效果：

使用方法：<a href="#"><span class="badge">20</span></a>



本文参考资料来自：http://www.runoob.com/bootstrap/bootstrap-labels.html，http://www.runoob.com/bootstrap/bootstrap-badges.html