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>

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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok