Последние новости:

Поиск по сайту:

Красивых женщин причисляют сегодня к талантам их мужей (Г. Лихтенберг).

Bootstrap — Значки

1 мин для чтения
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
01.06.2017
Bootstrap - значки

В этой главе мы поговорим о значках в Bootstrap. Значки похожи на метки; Основное отличие заключается в том, что углы более округлые.

Значки в основном используется для выделения новых или непрочитанных пунктов. Для того, чтобы использовать значки, надо только добавить <span class = «badge»> в ссылках, в навигации Bootstrap, и  в других элементах.

Следующий пример демонстрирует это:

<a href = "#">Mailbox <span class = "badge">50</span></a>

Когда нет новых или непрочитанных, значки просто разрушатся через CSS селектор :empty, если содержимое не существует внутри.

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

Вы можете разместить значки в активных состояниях планшетов и списков навигации. Вы можете достичь этого путем размещения <span class = «badge»> для активных ссылок, как показано в следующем примере:

<h4>Пример активного состояния в планшете </h4>

<ul class = "nav nav-pills">
 <li class = "active"><a href = "#">Главная <span class ="badge">42</span></a></li>
 <li><a href = "#">Профиль</a></li>
 <li><a href = "#">Сообщения <span class = "badge">3</span></a></li>
</ul>

<br>

<h4>Пример активного состояния в навигации</h4>

<ul class = "nav nav-pills nav-stacked" style = "max-width: "260px;">
 <li class = "active">
 <a href = "#">
 <span class = "badge pull-right">42</span>
 Home
 </a>
 </li>
 
 <li><a href = "#">Профиль</a></li>
 
 <li>
 <a href = "#">
 <span class = "badge pull-right">3</span>
 Сообщения
 </a>
 </li>
 
</ul></span>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Если статья понравилась, то поделитесь ей в социальных сетях:

Читайте также

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Статьи партнеров:

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить

Спасибо! Ваша заявка принята

close

Спасибо! Ваша заявка принята

close