Bootstrap предоставляет несколько различных вариантов стилизации навигационных элементов. Все они имеют одинаковую разметку и базовый класс .nav. Bootstrap также предоставляет вспомогательный класс, чтобы разделить разметку и состояния. Модификаторы Swap переключаются между каждым стилем.

Табличная навигация или вкладки

Чтобы создать меню навигации с вкладками -

  • Начните с базового неупорядоченного списка с базовым классом .nav
  • Добавить класс .nav-tabs .

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

<p>Tabs Example</p>
 
<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Навигация по вкладкам

Чтобы повернуть вкладки в pills, выполните те же действия, что и выше, используйте класс .nav-pills вместо .nav-tabs .

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

<p>Pills Example</p>
 
<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Вертикальные pills

Вы можете складывать вкладки вертикально, используя класс .nav-stacked вместе с классами .nav, .nav-pills .

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

<p>Vertical Pills Example</p>
 
<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Выравненный nav

Вы можете делать табуляции или pills равной ширины, как и у их родителя, на экранах шириной более 768 пикселей, используя класс .nav-justified вместе с .nav, .nav-tabs или .nav-pills соответственно. На меньших экранах навигационные ссылки сложены.

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

<p>Justified Nav Elements Example</p>
 
<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>
 



 
<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Отключенные ссылки

Для каждого из классов .nav , если вы добавите класс .disabled , он создаст серое звено, которое также отключит состояние : hover, как показано в следующем примере -

<p>Disabled Link Example</p>
 
<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
  
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>
 


 
<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
  
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Этот класс изменит внешний вид тег a, а не его функциональность.

Dropdowns

Меню навигации имеет аналогичный синтаксис с раскрывающимися меню. По умолчанию у вас есть элемент списка, в котором есть якорь, работающий в сочетании с некоторыми атрибутами данных, чтобы вызвать неупорядоченный список с классом .dropdown-menu.

Вкладки с раскрывающимися списками

Чтобы добавить выпадающие меню в tab -

  • Начните с базового неупорядоченного списка с базовым классом .nav
  • Добавить класс .nav-tabs.
  • Теперь добавьте неупорядоченный список с классом .dropdown-menu.
<p>Tabs With Dropdown Example</p>
 
<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
  
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java
         <span class = "caret"></span>
      </a>
     
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
     
   </li>
           
   <li><a href = "#">PHP</a></li>
</ul>

Вкладки с выпадающими окнами

Чтобы сделать то же самое с таблетками, просто замените класс .nav-tabs на .nav-pills, как показано в следующем примере.

<p>Pills With Dropdown Example</p>
 
<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
  
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
     
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
        
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
     
   </li>
           
   <li><a href = "#">PHP</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