小编Mik*_*son的帖子

Bootstrap 导航栏通知徽章

我正在建立一个允许用户相互发送消息的网站。我使用 AJAX 获得了许多新消息。因此,我只需要找到一种如何在用户导航栏中显示徽章的方法。

这是我想要实现的目标:

在此处输入图片说明

我想徽章使用创建<span class="badge badge-pill badge-primary">1</span>

我的导航栏代码:

<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-laravel" style="margin-bottom: 20px;">
    <div class="container">
        <a class="navbar-brand" href="#">Website</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Left Side Of Navbar -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">People <span class="sr-only">(current)</span></a>
                </li>
                <li …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

html ×1

twitter-bootstrap ×1