Bootstrap导航栏通知徽章 [英] Bootstrap navbar notification badge

问题描述

我正在建立一个允许用户相互发送消息的网站.我收到了一些使用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 class="nav-item">
                    <a class="nav-link" href="#">Photos <span class="sr-only">(current)</span></a>
                </li>
            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="navbar-nav ml-auto">
                <li><a class="nav-link" href="#">Login</a></li>
                <li><a class="nav-link" href="#">Register</a></li>
            </ul>
        </div>
    </div>
</nav>

解决方案

根据您发布的图片，您可以将徽章添加到messages父<li>中，例如:

<li class="nav-item">
    <span class="badge badge-pill badge-primary" style="float:right;margin-bottom:-10px;">1</span> <!-- your badge -->
    <a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
</li>

(假设自从您说您已经准备好ajax函数来更新徽章值以来，就不需要使用JavaScript了.)

当然，您可以将内联样式提取到外部样式表中

(这是一个小提琴 https://jsfiddle.net/k6x40tct/2/)

希望这会有所帮助.

I am building a website which allows users to send messages to each other. I get number of new messages using AJAX. Therefore, I just need to find a way how to display a badge in users's navbar.

Here is what I want to achieve:

I want the badge to be created using <span class="badge badge-pill badge-primary">1</span>.

My code for navbar:

<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 class="nav-item">
                    <a class="nav-link" href="#">Photos <span class="sr-only">(current)</span></a>
                </li>
            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="navbar-nav ml-auto">
                <li><a class="nav-link" href="#">Login</a></li>
                <li><a class="nav-link" href="#">Register</a></li>
            </ul>
        </div>
    </div>
</nav>

解决方案

according to the image you posted, you can add the badge in the messages parent <li> like :

<li class="nav-item">
    <span class="badge badge-pill badge-primary" style="float:right;margin-bottom:-10px;">1</span> <!-- your badge -->
    <a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
</li>

( assuming no javascript needed since you said you already have the ajax function ready to update the badge value ).

ofcourse, you can extract the inline styling to an external stylesheet

(here's a fiddle https://jsfiddle.net/k6x40tct/2/ )

hope this helps.

这篇关于Bootstrap导航栏通知徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！