Бутстрап - Значки

: Категория: Bootstrap 3; Опубликовано: 23 сентября 2018; Просмотров: 1409

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

Значки в основном используются для выделения новых или непрочитанных элементов. Чтобы использовать значки, просто добавьте span class = "badge" к ссылкам, Navstash Bootstrap и т.д.

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

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

Когда новых или непрочитанных элементов нет, значки будут просто сбрасываться с помощью CSS : пустого селектора, если контент не существует.

Активные Nav States

Вы можете разместить значки в активных состояниях таблеток и перечислить навигацию. Вы можете достичь этого, разместив span class = "badge" на активных ссылках, как показано в следующем примере -

<h4>Example for Active State in Pill </h4>
 
<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
   <li><a href = "#">Profile</a></li>
   <li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>
 

 
<h4>Example for Active State in navigations</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 = "#">Profile</a></li>
           
   <li>
      <a href = "#">
         <span class = "badge pull-right">3</span>
         Messages
      </a>
   </li>
           
</ul>

Бутстрап - Значки

Активные Nav States

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

Поделиться в соцсетях

Подписаться на канал

ТОП-10 статей

Свежие записи