twitter-bootstrap-3 - 如何在导航栏中的气球中显示新消息的数量？

Question

我的网站导航栏如下。我想在消息选项旁边添加一个气球之类的东西，让它指示新消息的数量……就像我们在 Facebook 上看到的，甚至在 Stack Overflow 上看到的。

我可以从数据库中获取新消息的数量，但问题是如何像我上面所说的那样显示它。

我正在使用引导程序。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div style="min-width:1280px;" class="navbar-inner">
        <ul class="nav pull-right">
            <li class="divider-vertical"></li>
            <li><a href="MasFeedback.aspx">feedback</a></li>
            <li class="divider-vertical"></li>
            <li><a href="MasProjects.aspx">Projects</a></li>
            <li class="divider-vertical"></li>
            <li><a href="MasWeekSchedule.aspx">Schedule</a></li>
            <li class="divider-vertical input-append"></li>
            <li><a href="MasMessaging.aspx">MESSAGING</a></li>
            <li class="divider-vertical"></li>
            <li><a href="MasProfile.aspx">Profile</a></li>
            <li class="divider-vertical"></li>
            <li><a href="MasHome.aspx">Home</a></li>
            <li class="divider-vertical"></li>
        </ul>
        <asp:LinkButton CssClass="brand" ID="LinkButton5" runat="server" Font-Size="Large" Font-Underline="False" Style="color: #FF0000; font-weight: 700; padding-left:120px;" OnClick="LinkButton4_Click" ForeColor="Red" Text="خروج از سامانه"></asp:LinkButton>
    </div>
</div>

Answer 1

请参阅：getbootstrap.com/components/#badges – 来自 Bass Jobsen