BootStrap-CSS样式_布局组件_徽章（消息提示）

最新推荐文章于 2024-07-06 19:58:00 发布

有梦的小草

最新推荐文章于 2024-07-06 19:58:00 发布

阅读量1k

点赞数

分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_布局组件 BootStrap徽章(消息提示)

本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/85147220

版权

BootStrap 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

Bootstrap 徽章（Badges）：徽章与标签相似，主要的区别在于徽章的边角更加圆滑。

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 添加到链接、Bootstrap 导航等这些元素上即可

span标签+.badge样式：设置徽章，例如：50 其中50为徽章内容

实例演示：

<a href="#">Email 50</a>

代码实例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>徽章</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
    <!-- span标签+.badge样式：设置徽章，例如：<span class="badge">50</span> 其中50为徽章内容 -->
    <div class="container" style="padding:20px">
        <h2>徽章</h2>
        <a href="#">Email <span class="badge">50</span></a>
    </div>
    <h4>胶囊式导航中的激活状态</h4>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">首页 <span class="badge">42</span></a>
        </li>
        <li><a href="#">简介</a>
        </li>
        <li><a href="#">消息 <span class="badge">重要3</span></a>
        </li>
    </ul>
    <br>
    <h4>列表导航中的激活状态</h4>
    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
        <li class="active">
            <a href="#">
                <span class="badge pull-right">42</span>
                首页
            </a>
        </li>
        <li><a href="#">简介</a>
        </li>
        <li>
            <a href="#">
                <span class="badge pull-right">重要3</span>
                消息
            </a>
        </li>
    </ul>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

显示效果：