Bootstrap 3 - Навигационные панели (navs)

В этой статье научимся создавать навигационные панели с помощью классов Twitter Bootstrap.

Основы создания навигационных панелей (navs)

Навигационные панели (navs) в Twitter Bootstrap реализованы в виде вкладок (tabs) и кнопок (pills). Создание навигационной панели начинается с создания маркированного списка (<ul></ul>) к которому добавляется базовый класс .nav. После этого переходят к созданию пунктов (<li></li>), которые будут являться вкладками (tabs) или кнопками (pills).

<ul class="navs">
  <li>Главная</li>
  <li>Вопросы</li>
  <li>Статьи</li>
</ul>

Навигационная панель в виде вкладок (tabs)

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

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Главная</a>
  </li>
  <li>
    <a href="#">Вопросы</a>
  </li>
  <li>
    <a href="#">Статьи</a>
  </li>
</ul>

Вышеприведенный код будет выглядеть следующим образом:

Создание вкладок (tabs) с иконками

К названию вкладки можно добавить иконку. Для этого необходимо элемент span или i, содержащий иконку, поместить в элемент a:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#"><span class="glyphicon glyphicon-home"></span> Главная</a>
  </li>
  <li>
    <a href="#"><span class="glyphicon glyphicon-pencil"></span> Вопросы</a>
  </li>
  <li>
    <a href="#"><span class="glyphicon glyphicon-th-list"></span> Статьи</a>
  </li>
</ul>

Вышеприведенный код будет выглядеть следующим образом:

Навигационная панель в виде кнопок (pills)

Для того чтобы сделать навигационную панель в виде кнопок необходимо к базовому классу .nav добавить класс .nav-pills.

<ul class="nav nav-pills">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Вопросы</a></li>
  <li><a href="#">Статьи</a></li>
</ul>

Вышеприведенный код будет выглядеть примерно так:

Создание кнопок (pills) с иконками

К названию кнопки навигационной панели можно добавить иконку. Для этого необходимо элемент span или i, содержащий иконку, поместить в элемент a:

<ul class="nav nav-pills">
  <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Главная</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Вопросы</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-th-list"></span> Статьи</a></li>
</ul>

Вышеприведенный код будет выглядеть следующим образом:

Навигационная панель с вертикальным расположением кнопок

По умолчанию, в навигационной панели pills кнопки расположены горизонтально. Чтобы их расположить вертикально, просто добавьте к классам .nav и .nav-pills дополнительный класс .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Вопросы</a></li>
  <li><a href="#">Статьи</a></li>
</ul>

Вышеприведенный код будет выглядеть следующим образом:

Создание вкладок (tabs) и кнопок (pills) с выпадающим меню

К вкладкам (tabs) и кнопкам (pills) можно добавить выпадающее меню (dropdown) с помощью соответствующей разметки и CSS классов .dropdown, .dropdown-toggle, .dropdown-menu и .caret.

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Выпадающее меню <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Например, добавим к одной из вкладок навигационной панели выпадающее меню:

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Вопросы</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Статьи <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Windows</a></li>
      <li><a href="#">Linux</a></li>
      <li><a href="#">Mac OS</a></li>
      <li class="divider"></li>
      <li><a href="#">Другие</a></li>
    </ul>
  </li>
</ul>

Вышеприведенный код будет выглядеть следующим образом:

Например, добавим к одной из кнопок навигационной панели выпадающее меню:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Вопросы</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Статьи <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Windows</a></li>
      <li><a href="#">Linux</a></li>
      <li><a href="#">Mac OS</a></li>
      <li class="divider"></li>
      <li><a href="#">Другие</a></li>
    </ul>
  </li>
</ul>

Вышеприведенный код будет выглядеть следующим образом:

Навигационная панель с вкладками или кнопками, выровненными по ширине

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

• на устройствах sm, md и lg (ширина >=768px) вкладки (кнопки) в навигационной панели располагаются горизонтально и имеют одинаковую ширину, равную ширине родительского элемента / количество вкладок (кнопок).
• на очень маленьких устройствах xs (ширина < 768px) вкладки (кнопки) в навигационной панели располагаются вертикально и имеют ширину, равную ширине родительского элемента.

Создание навигационной панели с вкладками или кнопками, выровненными по ширине, осуществляется посредством добавления класса .nav-justified к классу .nav.

<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Вопросы</a></li>
  <li><a href="#">Статьи</a></li>
</ul>

Перевод ссылки в не активное состояние

Ссылку, размещенную во вкладки или кнопки навигационной панели можно перевести в неактивное состояние. Для этого необходимо добавить класс .disabled к соответствующему элементу li.

<ul class="nav nav-pills">
  <li class="active"><a href="#">Главная</a></li>
  <li class="disabled"><a href="#">Вопросы</a></li>
  <li><a href="#">Статьи</a></li>
</ul>

Вышеприведенный код будет выглядеть следующим образом:

Переключение вкладок навигационного меню

<!-- Навигационная панель с 3 вкладками -->
<ul class="nav nav-tabs" role="tablist" id="myTabExample">
  <li class="active"><a href="#homeExample" role="tab" data-toggle="tab">Главная</a></li>
  <li><a href="#questionsExample" role="tab" data-toggle="tab">Вопросы</a></li>
  <li><a href="#articlesExample" role="tab" data-toggle="tab">Статьи</a></li>
</ul>

<!-- Содержимое вкладок -->
<div class="tab-content">
  <!-- Содержимое 1 вкладки -->
  <div class="tab-pane active" id="homeExample">
    Содержание вкладки "Главная"
  </div>
  <!-- Содержимое 2 вкладки -->
  <div class="tab-pane active" id="questionsExample">
    Содержание вкладки "Вопросы"
  </div>
  <!-- Содержимое 3 вкладки -->
  <div class="tab-pane active" id="articlesExample">
    Содержание вкладки "Статьи"
  </div>
</div>

<!-- Скрипт для активирования работы вкладок -->
<script>
$(function() {
  $('#myTabExample a:last').tab('show')
});
</script>

Вышеприведенный код будет выглядеть следующим образом: