Лучшее руководство по Bootstrap значок в 2024 году. В этом руководстве вы можете изучить
примеров,примеров,Активированный статус навигации,примеров,
Bootstrap значок
Эта глава описывает бутстрапе значки (значки). Значки и метки похожи, основное отличие состоит в том, что значок более закругленные углы.
Значки (Badges) используется в основном для новых или непрочитанных элементов выделены. Чтобы использовать значок, просто поставить<пролет класс = "значок"> добавляется к ссылке, Bootstrap навигации и т.д. Эти элементы могут быть.
Следующий пример иллюстрирует этот момент:
примеров
Показать непрочитанные сообщения:
<А HREF = "#"> Почтовый ящик < пролет класс = "значок"> 50 < / SPAN> </ а>
Попробуйте » Результаты следующие:
Когда нет никаких новых или непрочитанные элементы, черезCSS: пустой селектор, значки будут сложены, показывая внутри пустой.
примеров
Дисплей непрочитанных исчезают:
<Div класс = "контейнер">
<H2> значок </ h2>
<P> Класс .badge определяет количество непрочитанных сообщений: </ p>
<P> <а HREF = "#"> Входящие <пролет класс = "значок"> 21 < / SPAN> </ а> </ p>
</ Div>
Попробуйте »
Активированный статус навигации
Вы можете поместить знак в активном состоянии капсулы навигации и списка навигации. Используя<SPAN класс = "значок"> , чтобы активировать ссылку, как показано в следующем примере:
примеров
<H4> капсула навигации активна </ h4>
<Ul класс = "нав СЧА таблетки" >
<Li класс = "активный">
<А HREF = "#"> Главная <SPAN класс = "значок"> 42 < / SPAN>
</ A>
</ Li>
<Li>
<А HREF = "#"> Введение </ а>
</ Li>
<Li>
<А HREF = "#"> Новости <SPAN класс = "значок"> 3 < / SPAN>
</ A>
</ Li>
</ UL>
<Br>
<H4> список активной навигации </ h4>
<Ul класс = "нав СЧА таблетки Nav -stacked" стиль = "макс-ширина: 260px ;">
<Li класс = "активный">
<А HREF = "#">
<SPAN класс = "значок тянуть вправо" > 42 </ SPAN> Главная </ а>
</ Li>
<Li>
<А HREF = "#"> Введение </ а>
</ Li>
<Li>
<А HREF = "#">
<SPAN класс = "значок тянуть вправо" > 3 </ SPAN> Новости </ а>
</ Li>
</ UL>
Попробуйте » Результаты следующие: