Есть люди, которые всю свою жизнь не могут отвыкнуть от своей молодости (Неизв.).
Bootstrap – значки
(1 оценок, среднее: 5,00 из 5)
Загрузка...
Значки в основном используется для выделения новых или непрочитанных пунктов. Для того, чтобы использовать значки, надо только добавить <span class = “badge”> в ссылках, в навигации Bootstrap, и в других элементах.
Следующий пример демонстрирует это:
1 | <span class="tag"><a</span> <span class="atn">href</span> <span class="pun">=</span> <span class="atv">"#"</span><span class="tag">></span><span class="pln">Mailbox </span><span class="tag"><span</span> <span class="atn">class</span> <span class="pun">=</span> <span class="atv">"badge"</span><span class="tag">></span><span class="pln">50</span><span class="tag"></span></a></span> |
Когда нет новых или непрочитанных, значки просто разрушатся через CSS селектор :empty, если содержимое не существует внутри.
Активный состояния навигации
Вы можете разместить значки в активных состояниях планшетов и списков навигации. Вы можете достичь этого путем размещения <span class = “badge”> для активных ссылок, как показано в следующем примере:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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> |
