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

Александр Мальцев
Александр Мальцев
58K
21
Содержание:
  1. Основы создания навигационных панелей (navs)
  2. Навигационная панель в виде вкладок (tabs)
  3. Создание вкладок (tabs) с иконками
  4. Навигационная панель в виде кнопок (pills)
  5. Создание кнопок (pills) с иконками
  6. Навигационная панель с вертикальным расположением кнопок
  7. Создание вкладок (tabs) и кнопок (pills) с выпадающим меню
  8. Навигационная панель с вкладками или кнопками, выровненными по ширине
  9. Перевод ссылки в не активное состояние
  10. Переключение вкладок навигационного меню
  11. Комментарии

В этой статье научимся создавать навигационные панели с помощью классов 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>

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

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

Bootstrap 3 - Навигационная панель в виде вкладок

Создание вкладок (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>

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

Bootstrap 3 - Вкладки с иконками

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

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

Bootstrap 3 - Навигационная панель в виде кнопок

Создание кнопок (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>

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

Bootstrap 3 - Кнопочная панель с иконками

По умолчанию, в навигационной панели 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>

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

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

Создание вкладок (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>
Примечание: Выпадающее меню (dropdown) требует наличия подключенного плагина JavaScript dropdown или файла bootstrap.js (bootstrap.min.js).

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

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

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

Bootstrap 3 - Добавление к одной из вкладок навигационной панели выпадающего меню

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

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

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

Bootstrap 3 - Добавление к одной из кнопок навигационной панели выпадающего меню

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>

Bootstrap - панель nav с вкладками или кнопками, выровненными по ширине

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

Ссылку, размещенную во вкладки или кнопки навигационной панели можно перевести в неактивное состояние. Для этого необходимо добавить класс .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>

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

Bootstrap 3 - Перевод ссылки в не активное состояние
Примечание: Класс .disabled изменяет цвет ссылки и удаляет эффект при наведении на неё. Однако ссылка остаётся рабочей, изменить ситуацию можно, например, с помощью создания дополнительного JavaScript кода, удаляющего атрибут href.

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

<!-- Навигационная панель с 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>

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

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

Комментарии:

  1. Анатолий
    30 сентября 2016, 10:05
    Здравствуйте! Спасибо за Ваш ресурс, очень помогает.
    Подскажите пожалуйста как правильно (с точки зрения bootstrap) в nav сделать элементы меню без стилей pills и tabs, просто ссылки нужного мне цвета, активная выделяется тоже только цветом ссылки.
    1. Александр Мальцев
      03 октября 2016, 11:32
      Убрать у элемента
      <ul class="nav nav-tabs">
      
      классы nav nav-tabs.
      1. Анатолий
        04 октября 2016, 06:53
        Спасибо.
    2. Дмитрий
      17 апреля 2016, 09:27
      Добрый день! Подскажите, пожалуйста, как сделать такое меню как у вас блок Навигация???
      Можно его создать на базе bootstrap c помощью html и css? Если у вас статья такое сделать напишите, пожалуйста.
      1. Александр Мальцев
        03 октября 2016, 11:34
        Такое меню называется аккордеон. Как его сдлеать можно посмотреть на этой странице bootstrap 3 accordion.
      2. Денис
        13 февраля 2016, 14:16
        Добрый день, подскажите пожалуйста есть такая задача.
        Есть кнопки
        <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>
        
        Как сделать чтобы при нажатии на кнопку описание было действия через якорь поехало вниз где описание так же и туда где отзывы при этом чтобы кнопка была активная если мы переехали к описанию то кнопка описание активна, заранее спасибо
        1. Александр Мальцев
          14 февраля 2016, 14:48
          Здравствуйте, не совсем понятно, что Вы написали.
          Наверно хотите, чтобы при нажатию на кнопку, она становилось активной.
          Тогда необходимо добавить на страницу следующий скрипт.
          <script>
          $(function(){
            $('ul.nav.nav-pills li a').click(function() {
              // удаляем класс .active у всех кнопок
              $('ul.nav.nav-pills li').each(function() {
                $(this).removeClass('active');
              });
              //добавляем для нажатой
              $(this).parent().addClass('active');
            });
          });
          </script>
          
          1. Денис
            16 февраля 2016, 10:44
            Да это тоже но еще хотел спросить как сделать якоря getbootstrap.com/css/#overview на этом сайте если нажать по меню то оно перепрыгивает по странице, у меня почему то не работает а просто переходит на главную site.ru/#link как с этими кнопками сделать якорь по странице
            1. Александр Мальцев
              03 октября 2016, 11:41
              Если Вы формируете адреса на сервере, то вместо #Характеристики сформируйте полные адреса.
        2. Виталий
          28 декабря 2015, 21:02
          Добрый день!
          Подскажите, как организовать панель, которая была бы прикреплена к верху, на ней две картинки слева и справа, а по центру надпись ? При уменьшении размеров окна ширина и высота тоже бы уменьшались, а надпись если бы не влезала, то отсекалась.
          1. Александр Мальцев
            29 декабря 2015, 17:33
            Здравствуйте, Виталий.
            Ваш Вопрос, насколько я понимаю, никакого отношения к компоненту nav не имеет.
            Решить Вашу проблему с помощью Bootstrap можно так:
            <div id="myPanel">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-xs-4 col-sm-3 col-md-2">
                   <img class="img-responsive pull-left" src="...">
                  </div>
                  <div class="col-xs-4 col-sm-6 col-md-8 text-center">
                    Некоторый текст
                  </div>
                  <div class="col-xs-4 col-sm-3 col-md-2">
                    <img class="img-responsive pull-right" src="...">
                  </div>
                </div>
              </div>
            </div>
            
            CSS:
            #myPanel {
              position: fixed; /*Положение фиксированное*/
              width: 100%; /*На всю ширину рабочей области браузера*/
              top: 0px; /*Прикрепляем панель к верху*/
              left: 0px; /*прикрепляем панель к левому краю*/
              z-index: 1001; /*Отображать панель над остальным содержимым*/
            }
            #myPanel .row {
              background-color: #fff; /*Фон: белый*/
            }
            #myPanel img.pull-left {
              margin-left: -15px; /*Убираем отступ для левой картинки*/
            }
            #myPanel img.pull-right {
              margin-right: -15px; /*Убираем отступ для правой картинки*/
            }
            
            P.S. Настраиваем ширину и соответственно высоту изображения с помощью колонок Bootstrap: col-xs-4 col-sm-3 col-md-2.
          2. Иван
            08 октября 2015, 10:08
            Такой вопрос, решил с помощью вкладок организовать так сказать просмотр видео, но столкнулся с проблемой, при открытии одной вкладки и просмотра видео на ней, если видео не остановить, то оно будет проигрывать до конца, в то же время можно переключиться на контент другой вкладки и там смотреть видео. В итоге видео в каждой вкладке будет накладываться друг на друга и будет полный хаос. Есть ли возможность как то организовать процесс перехода с одной вкладки на другую, чтобы при этом в неактивной вкладке видео останавливалось. Ну вы поняли вопрос. я так понимаю надо лезть в JS и там делать условие если вкладка не активна, то видео на паузу?
            1. Александр Мальцев
              08 октября 2015, 14:49
              Если необходимо чтобы показ видео просто прекращался, то можно воспользоваться более простым скриптом:
              <script>
              $('a[data-toggle="tab"]').on('hide.bs.tab', function () {
                $(".tab-content .active iframe").attr("src", $('iframe').attr('src'));
              });
              </script>
              
              1. Александр Мальцев
                08 октября 2015, 14:43
                Для того чтобы видео при переключении вкладок ставилось на паузу можно воспользоваться следующим решением:
                <ul class="nav nav-tabs" role="tablist">
                  <li class="active"><a href="#tab-video1" data-toggle="tab">Видео 1</a></li>
                  <li><a href="#tab-video2" data-toggle="tab">Видео 2</a></li>
                  <li><a href="#tab-video3" data-toggle="tab">Видео 3</a></li>
                  <li><a href="#tab-video4" data-toggle="tab">Видео 4</a></li>
                </ul>
                
                <div class="tab-content">
                  <div class="tab-pane active" id="tab-video1">
                    <iframe id="video1" src="https://www.youtube.com/embed/QECl5J9lj1o?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
                  </div>
                  <div class="tab-pane" id="tab-video2">
                    <iframe id="video2" src="https://www.youtube.com/embed/Bt3IzHn_2rE?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>	
                  </div>
                  <div class="tab-pane" id="tab-video3">
                	<iframe id="video3" src="https://www.youtube.com/embed/aVYaVToZI-w?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>	
                  </div>
                  <div class="tab-pane" id="tab-video4">
                    <iframe id="video4" src="https://www.youtube.com/embed/Dxs5-jselMQ?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>	
                  </div>
                </div>
                
                <script>
                var player;
                
                function onYouTubeIframeAPIReady() {
                  player1 = new YT.Player('video1', {
                    events: {
                      'onReady': onPlayerReady
                    }
                  });
                  player2 = new YT.Player('video2', {
                    events: {
                      'onReady': onPlayerReady
                    }
                  });
                  player3 = new YT.Player('video3', {
                    events: {
                      'onReady': onPlayerReady
                    }
                  });
                  player4 = new YT.Player('video4', {
                    events: {
                      'onReady': onPlayerReady
                    }
                  });
                }
                
                function onPlayerReady(event) {
                  $('a[data-toggle="tab"]').on('hide.bs.tab', function () {
                    event.target.pauseVideo();
                  });
                }
                
                var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                </script>
                
              2. Артем
                11 августа 2015, 15:20
                Не активные ссылки внутри навигационной панели
                В примере не проставлен класс disabled для второй ссылки.
                1. Александр Мальцев
                  11 августа 2015, 15:33
                  Спасибо, Артём. Поправил.
                2. Дамир
                  04 июня 2015, 21:36
                  Привет!

                  1. По поводу «Вкладки и кнопки навигационного меню, выровненные по ширине»
                  «Однако, данное меню работает только на устройствах, ширина экранов у которых, меньше чем 768px.»


                  У меня работает на экране 1600 px, во всю ширину (12 столбцов) и в ячейках по 8 6 и т.д.

                  2. «Переключение вкладок навигационного меню»
                  Там в коде везде стоит «Содержание вкладки „Главная“» хотя нужно Главаня, Вопросы, Статьи.

                  Также у меня не работает код
                  $(function () {
                      $('#myTabExample a:last').tab('show')
                    })
                  Заработал только когда сделал его таким:
                  jQuery(document).ready(function($) {
                          $('#myTabExample a:last').tab('show');
                   });
                  Спасибо!
                  1. Александр Мальцев
                    05 июня 2015, 14:04
                    Дамир, спасибо!
                    Раздел «Панель с вкладками или кнопками, выровненными по ширине» поправил и добавил рисунок.
                    1. Дамир
                      05 июня 2015, 14:24
                      А можно .nav-justified (на всю ширину) добавить куда нибудь в меню (navbar)? а то что-то у меня не сработало?
                      1. Александр Мальцев
                        05 июня 2015, 14:40
                        В NavBar такая возможность не поддерживается.
                        1. Дамир
                          05 июня 2015, 15:19
                          жаль,
                          было бы круто, на всю ширину элементы меню располагать
                  Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.