В этой статье мы расскажем о знаках 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>

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



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies).

You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok