Менее опасно ногой оступиться, чем языком (А. Мейдани).
Bootstrap – Значки
1 мин для чтения
(1 оценок, среднее: 5,00 из 5)
Загрузка... 1 июня 2017
В этой главе мы поговорим о значках в 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>
Если статья понравилась, то поделитесь ей в социальных сетях:
Читайте также
3 апреля, 2020
Подписаться
авторизуйтесь
0 комментариев
