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

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

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

Для создания вкладок навигации по меню:

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

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

<p>Пример вкладок</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Главная</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>Пример на планшете</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Главная</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>Вертикальная навигация на планшетах</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Главная</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>

Выравненная навигация на планшетах

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

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

<p>Пример Bootstrap - Выравненная навигация на планшетах</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Главная</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 = "#">Главная</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>Пример недоступных ссылок</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Главная</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 = "#">Главная</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, чтобы отключить ссылки здесь.

Выпадающие списки

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

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

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

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

<p>Вкладки с выпадающим списком</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Главная</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>Пример Bootstrap - Выпадающие списки на планшете</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Главная</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 = "#">Разделитель для ссылок</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Читайте также

Быть веб-разработчиком в 2020 — Часть 1: CSS или Bootstrap?

5 лет назад

7 Основных инструментов для Frontend веб-разработки сайтов в 2023 году

2 года назад

Как пользоваться bootstrap Glyphicons

8 лет назад