Учебники

Bootstrap — элементы навигации

Октябрь 25, 2018

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

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

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

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

  • Добавьте класс .nav-tabs .

Начните с простого неупорядоченного списка с базовым классом .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>

Таблетки Навигация

Основные таблетки

Чтобы превратить вкладки в таблетки, выполните те же действия, что и выше, используйте класс .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>

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

Вы можете сложить таблетки вертикально, используя класс .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>

Оправданный Нав

Вы можете сделать вкладки или таблетки равной ширины как у их родителя на экранах шире, чем 768 пикселей, используя класс .nav-jusified вместе с .nav, .nav-tabs или .nav, .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>

<br>
<br>
<br>

<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>

<br>
<br>

<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>, но не его функциональность. Используйте пользовательский JavaScript, чтобы отключить ссылки здесь.

Dropdowns

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

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

Чтобы добавить выпадающие на вкладку —

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

  • Добавьте класс .nav-tabs .

  • Теперь добавьте неупорядоченный список с классом .dropdown-menu .

Начните с простого неупорядоченного списка с базовым классом .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>

Таблетки с выпадающими

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

45
Share: