Html 如何在 Bootstrap 中统计消息/警报指示器的总数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18471141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a total count of messages / alerts indicator in Bootstrap?
提问by Clannad System
I am not familiar with the exact term and keyword to search and Iam just begining to design. So I would like to ask if the term alert indicator is correct.
我不熟悉要搜索的确切术语和关键字，我才刚刚开始设计。所以我想问一下警报指示器这个术语是否正确。
And how do I be able to do it on Twitter Bootstrap?
我如何才能在 Twitter Bootstrap 上做到这一点？
below is the image of the indicator i would like to accomplish. Thanks..
下面是我想要完成的指标的图像。谢谢..
回答by Timothy Shields
Take a look at Bootstrap's Badges: http://getbootstrap.com/components/#badges
看看 Bootstrap 的徽章：http: //getbootstrap.com/components/#badges
Make a class that specifies a container for a glyphicon and badge and places the badge at a fixed offset from the icon. Something like this:
创建一个类，为字形和徽章指定一个容器，并将徽章放置在与图标的固定偏移量处。像这样的东西：
<div class="notification-icon">
<span class="glyphicon glyphicon-envelope"></span>
<span class="badge">19</span>
</div>
With CSS like this:
用这样的 CSS：
.notification-icon .glyphicon {
...
}
.notification-icon .badge {
...
}
You should easily be able to set it up so that the badge only shows when you have a nonzero number of notifications.
您应该能够轻松设置它，以便仅在通知数量非零时才会显示徽章。
