Где начало того конца, которым оканчивается начало? (К. Прутков).

Bootstrap – значки

1 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
1 июня 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.

Просмотров: 140

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

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

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

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

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

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

close
galka

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

close