Как сделать общее количество индикаторов сообщений/предупреждений в Bootstrap?

Я не знаком с точным термином и ключевым словом для поиска, и я просто начинаю дизайн. Поэтому я хотел бы спросить, правильно ли указан индикатор предупреждения.

И как я могу сделать это в Twitter Bootstrap?

ниже изображен индикатор, который я хотел бы выполнить. Спасибо..

enter image description here

Ответы

Ответ 1

Взгляните на значки Bootstrap: http://getbootstrap.com/components/#badges

Создайте класс, который указывает контейнер для глификона и значка и помещает значок с фиксированным смещением от значка. Что-то вроде этого:

<div class="notification-icon">
    <span class="glyphicon glyphicon-envelope"></span>
    <span class="badge">19</span>
</div>

С CSS следующим образом:

.notification-icon .glyphicon {
    ...
}

.notification-icon .badge {
    ...
}

Вы можете легко настроить его так, чтобы значок показывался только тогда, когда у вас есть ненулевое количество уведомлений.