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>

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

7 Основных инструментов для Frontend веб-разработки сайтов в 2023 году

6 декабря, 2022

Как пользоваться bootstrap Glyphicons

14 февраля, 2017

Быть веб-разработчиком в 2020 – Часть 1: CSS или Bootstrap?

30 марта, 2020

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

3 апреля, 2020