【21】Bootstrap — 徽章

最新推荐文章于 2024-08-29 10:38:02 发布

有心博客

最新推荐文章于 2024-08-29 10:38:02 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

文章标签： bootstrap 徽章

本文链接：https://blog.youkuaiyun.com/qq_32629809/article/details/77864413

本文介绍如何利用Bootstrap框架中的badge组件来美化链接、按钮及导航条中的未读消息提示，通过简单的HTML代码示例展示了badge组件的具体用法。

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

<!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>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <a href="#">Inbox <span class="badge">42</span></a>
        <button class="btn btn-primary" type="button">
            Messages <span class="badge">4</span>
        </button>
        <hr/>
        <ul class="nav nav-pills" role="tablist">
            <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
        </ul>
    </body>
</html>