1. Home
  2. Bootstrap значок

Лучшее руководство по 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>

Попробуйте »

Результаты следующие:

Активированный статус навигации

Online Tutorial

Web Tools

Hot Tools

Website Navigation