Bootstrap - не работает выпадающее меню?

Выпадающие меню для кнопок, объединенных в группу

На следующем примере показана возможность добавления выпадающего меню для кнопки, которая находится в группе кнопок
(.btn-group):

<!-- Кнопки, объединенные в группу с помощью класса .btn-group -->
<div class="btn-group">
  <!-- Обычные кнопки -->
  <button type="button" class="btn btn-warning">Обычная кнопка</button>
  <button type="button" class="btn btn-danger">Обычная кнопка</button>
  <!-- Кнопка с выпадающим меню -->
  <div class="btn-group">
    <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle">
      Кнопка с выпадающим меню 
      <span class="caret"></span>
    </button>
    <!-- Выпадающее меню -->
    <ul class="dropdown-menu">
      <!-- Пункты меню -->
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Пункт 3</a></li>
    </ul>
  </div>
</div>

Для создания кнопок сгруппированных вертикально достаточно изменить класс на
.

<!-- Кнопки, объединенные в группу с помощью класса .btn-group -->
<div class="btn-group-vertical">
  <!-- Обычные кнопки -->
  <button type="button" class="btn btn-warning">Обычная кнопка</button>
  <button type="button" class="btn btn-danger">Обычная кнопка</button>
  <!-- Кнопка с выпадающим меню -->
  <div class="btn-group">
    <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle">
      Кнопка с выпадающим меню 
      <span class="caret"></span>
    </button>
    <!-- Выпадающее меню -->
    <ul class="dropdown-menu">
      <!-- Пункты меню -->
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Пункт 3</a></li>
    </ul>
  </div>
</div>

Назначение расширения Jansy Bootstrap

Jansy Bootstrap – это расширение для платформы Twitter Bootstrap 3, которое предлагает веб-разработчикам дополнительные компоненты и плагины:

Кнопки с метками;
Вертикальное навигационное меню;
Навигационное меню, которое прикреплено к левой или правой части экрана;
Скрывающееся навигационное меню (используя плагин offcanvas);
Предупреждения (alerts), прикреплённые к нижней или верхней части экрана;
Плагин «rowlink.js», который превращает строку таблицы в ссылку;
Плагин «inputmask.js», который предназначен для добавления определенной маски к некоторому полю;
Плагин «fileinput.js», предназначенный для создания визуального привлекательных виджетов для отображения выбранных файлов или изображений.

Доступность

WAI ARIA стандарт определяет фактический , но это характерно для меню, похожего на приложение, которое запускает действия или функции. Меню ARIA могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.

С другой стороны, выпадающие списки Bootstrap разработаны как общие и применимы к различным ситуациям и структурам разметки. Например, можно создавать раскрывающиеся списки, содержащие дополнительные входные данные и элементы управления формой, такие как поля поиска или формы входа. По этой причине Bootstrap не ожидает (и не добавляет автоматически) какие-либо атрибуты и , необходимые для истинных ARIA. Авторы должны сами включить эти более конкретные атрибуты.

Однако Bootstrap добавляет встроенную поддержку для большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным элементам с помощью клавиш курсора и закрывать меню с помощью клавиши ESC.

Включение табов c помощью JavaScript

Активировать табы можно не только посредством атрибута , но и с помощью написания кода на JavaScript.

В этом случае добавлять к ссылкам атрибут не нужно.

Отображение вкладки в этом случае будет выполняется посредством вызова метода . Этот метод нужно будет вызывать для соответствующей вкладки (ссылки) каждый раз, когда пользователь нажмёт на неё.

Это, например, можно реализовать посредством добавления следующего скрипта на страницу:

<ul class="nav nav-tabs" id="product">...</ul>
<div class="tab-content">...</div>

<script>
  // #product a – селектор, выбирающий элементы a в #product (вкладки, при клике на которые нужно отображать соответствующий блок)
  $('#product a').click(function(e){
    e.preventDefault();
    $(this).tab('show');
  });
</script>

При необходимости метод вы можете использовать также, когда вам необходимо программно переключить вкладку.

Примеры:

// переключиться на tab по значению атрибута href
$('#product a').tab('show');
// переключиться на первый tab
$('#product li:first-child a').tab('show');
// переключиться на последний tab
$('#product li:last-child a').tab('show');
// переключиться на 2 tab
$('#product li:nth-child(2) a').tab('show');

Дополнения

Доп. цвета

Прогресс-бар использует одинаковую цветовую палитру с кнопками и сообщениями.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Полосатые прогресс-бары

Так же как и в стандартном баре мы имеем версии цветных полосатых прогресс-баров.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Как зафиксировать меню при прокрутке

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

<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div> 
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" style="position: -webkit-sticky; position: sticky; top: 0;">
    ...
  </nav>
</body>

Но данное решение не работает в браузерах IE и Edge. Если нужна их поддержка всех браузеров, то можно воспользоваться плагином Bootstrap 3 Affix.

<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div> 
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="90">
    ...
  </nav>
</body>

.navbar.affix {
  top:0;
  width:100%;
}

Как изменить расположение кнопки «гамбургер»

Например, для того чтобы расположить кнопку «гамбургер» в левой части меню, достаточно её просто расположить до бренда:

<nav class="navbar navbar-expand-md navbar-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>  
  <a class="navbar-brand" href="#">Navbar</a>          
  ...

Например, для того чтобы кнопку поместить по центру, оставшегося после бренда пространства в меню, к ней необходимо добавить классы и :

...
<button class="navbar-toggler ml-auto mr-auto" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
...

Сообщество

Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

Следуйте @getbootstrap on Twitter.
Прочтите и подпишитесь на The Official Bootstrap Blog.
Join the official Slack room.
Chat with fellow Bootstrappers in IRC. On the server, in the channel.
Справку по реализации можно найти на сайте Stack Overflow (с тегами ).
Разработчики должны использовать ключевое слово в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаружимости.

Вы также можете подписаться на @getbootstrap в Twitter, чтобы следить за последними сплетнями и классными музыкальными клипами.

Навигационный список Он же Сайдбар

Навигационный список позволяет создать легкую и удобную в использовании навигацию с дополнительными заголовками. Такой сайдбар используется в Finder в MAC OS X.

Пример навигационного списка

К списку ссылок и добавьте классы — :

Заголовок
Второй заголовок

Заголовок
Еще заголовок

<ul class="nav nav-list">
  <li class="nav-header">Заголовок</li>
  <li class="active"><a href="#">На главную</a></li>
  <li><a href="#">Библиотека</a></li>
  ...
</ul>

Замечание
Для вложения в навигационные списки, применяйте классы только к вложенным элементам — .

Горизонтальный разделитель

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

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

Динамический Navbar

В зависимости от количества контента, Вы можете задать скрытие некоторых элементов. Для этого, поместите контент в дополнительный div элемент с классом , и добавьте кнопку с классом .

- Nav header

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>

Внимание! Для работы динамического Navbar’а необходим и .

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом или другим элементом с . При необходимости выпадающие элементы можно запускать из элементов или .

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами :

Кнопка выпадающего списка

А вот так — с элементами:

Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:

Главная

Вторичная

Успех

Инфо

Предупреждение

Опасность

Выпадающие элементы кнопок с разделенными зонами

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

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг с обеих сторон выпадающей «каретки» и удаляет , добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

Главная

Toggle Dropdown

Вторичная

Toggle Dropdown

Успех

Toggle Dropdown

Инфо

Toggle Dropdown

Предупреждение

Toggle Dropdown

Опасность

Toggle Dropdown

Доступность

Стандарт WAI ARIA описывает и определяет виджет как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.

Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов ( и ), необходимых для меню согласно стандарту ARIA.

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.

Выпадающие списки в навигационном меню (navbar)

Добавление выпадающих списков к элементам навигационного меню:

<nav class="navbar navbar-default navbar-static">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".js-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" style="padding:15px 15px;">Название проекта</a>
    </div>
    <div class="collapse navbar-collapse js-navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Главная</a></li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a></li>
            <li><a href="#">Текст подпункта</a></li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Создание вкладок на фреймворке Bootstrap

Создание вкладок в Bootstrap 4 начинается с создания самих вкладок.

Для этого необходимо создать список с классами и . После этого в нужно поместить определённое количество элементов с классом . Их количество должно соответствовать количеству вкладок, которые мы хотим создать.

<ul class="nav nav-tabs">
  <li class="nav-item"></li>
  <li class="nav-item"></li>
</ul>

Затем в каждый элемент необходимо вложить ссылку с классом , атрибутом и . В следует указать ссылку на блок, который она будет показывать (связан с ней). Содержимое элемента будет являться названием вкладки. Кроме этого, к одной из ссылок следует добавить класс . Этот класс будет определять вкладку, которая должна быть выделенной (активной) по умолчанию.

<ul class="nav nav-tabs">
  <!-- Первая вкладка (активная) -->
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#description">Описание</a>
  </li>
  <!-- Вторая вкладка -->
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  ...
</ul>

После создания самих вкладок необходимо создать блоки с контентом, которые будут переключаться с помощью них.

Для этого нужно создать элемент с классом . Он будет являться контейнером. В нём необходимо создать блоки с классом и атрибутом . Значение должно определять вкладку, связанную с этим блоком. К блоку, содержимое которого необходимо отображать по умолчанию, необходимо добавить классы и . При желании к блокам также можно добавить класс . Это подключит к ним анимацию и сделает их переключение более плавным.

<!-- Сами вкладки -->
<ul class="nav nav-tabs">...</ul>
<!-- Блоки с контентом -->
<div class="tab-content">
  <!-- Первый блок (он отображается по умолчанию, т.к. имеет классы show и active) -->
  <div class="tab-pane fade show active" id="description">...</div>
  <!-- Второй блок -->
  <div class="tab-pane fade" id="characteristics">...</div>
  ...
</div>

После этого в каждый из этих блоков следует поместить определённый контент, который нужно будет отображать при активности той или иной вкладки.

В итоге:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#description">Описание</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#opinion">Отзывы</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="description">
    Описание товара...
  </div>
  <div class="tab-pane fade" id="characteristics">
    Характеристики товара...
  </div>
  <div class="tab-pane fade" id="opinion">
    Отзывы...
  </div>
</div>

В Bootstrap 3 HTML-разметка и вид вкладок немного отличается от 4 версии. Пример, приведённый выше, в Bootstrap 3 будет выглядеть следующим образом:

<ul class="nav nav-tabs">
  <li class="active">
    <a data-toggle="tab" href="#description">Описание</a>
  </li>
  <li>
    <a data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  <li>
    <a data-toggle="tab" href="#opinion">Отзывы</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="description">
    Описание товара...
  </div>
  <div class="tab-pane" id="characteristics">
    Характеристики товара...
  </div>
  <div class="tab-pane" id="opinion">
    Отзывы...
  </div>
</div>

В этих примерах активирование компонента Tabs (логики на JavaScript, применительно к этим элементам) выполнялось с помощью атрибута .

А определение того, какая вкладка какой контент должна показывать устанавливалась посредством атрибута для самой вкладки и для блока с контентом.

Доступность

Не забудьте добавить к элементу управления . Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение . Если Вы установили открываемый складной элемент по умолчанию с помощью класса , вместо этого установите для элемента управления. Плагин автоматически переключит этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также связанный с тем же складным элементом). Если элемент HTML элемента управления не является кнопкой (например, или ), атрибут должен быть добавлен к элементу.

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

Обратите внимание, что текущая реализация Bootstrap не охватывает различные необязательные взаимодействия с клавиатурой, описанные в — Вам нужно будет включить их самостоятельно в собственный JavaScript

Примеры

Выпадающие элементы одинарных кнопок

Кнопка выпадающего списка

А вот так — с элементами:

Главная

Вторичная

Успех

Инфо

Предупреждение

Опасность

Выпадающие элементы кнопок с разделенными зонами

Главная

Toggle Dropdown

Вторичная

Toggle Dropdown

Успех

Toggle Dropdown

Инфо

Toggle Dropdown

Предупреждение

Toggle Dropdown

Опасность

Toggle Dropdown

Легко изменяемые

При помощи дополнительной разметки можно добавить любой контент к миниатюре, например заголовок, текст, кнопки.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Зачем использовать?

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

Всплывающее меню

Вы можете изменить выпадающее меню, чтобы оно стало «всплывающим». Для этого используйте .dropup вместо .dropdown у родительского элемента.

Выравнивание справа

Вы можете добавить класс .dropdown-menu-right к классу .dropdown-menu, чтобы выровнять меню по правой стороне его родителя.

Взаимодействие со множественными объектами

Кнопки и ссылки и могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам или через селектор jQuery. Несколько или могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты или .

Переключить второй элемент
Переключить оба элемента

Некоторый заполнитель для первого компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.

Некоторое содержимое заполнителя для второго компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.

Дополнительные варианты расположения

Расположите фиксированный navbar вверху или внизу страницы применяя дополнительные классы к элементу navbar.

Фиксированный вверху страницы

Добавьте класс имейте ввиду что под фиксированным navbar’ом скрыто минимум 40px вашей страницы — используйте для элемента для создания отступа вверху страницы. Добавьте дополнительные CSS-правила после основного Bootstrap CSS-файла, но перед responsive CSS.

<div class="navbar navbar-fixed-top">
  ...
</div>

Добавьте класс к элементу navbar.

<div class="navbar navbar-fixed-bottom">
  ...
</div>

Статичный расположенный вверху

Создайте статичный navbar расположенный вверху, который будет скроллиться вместе со страницей . В отличие от класса , у вас нет необходимости добавлять отступ (padding) к элементу .

<div class="navbar navbar-static-top">
  ...
</div>

Как это работает

Вот что вам надо знать перед использованием навбара:

Навбары требуют «обертки» из классов и для отзывчивости при «складывании»и классы , а также классы .
Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте для ограничения их горизонтальной ширины.
Используйте наши классы спейсинга и «флекс» для контроля над пространством и выравниванием внутри навбаров.
Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс в . Смотри класс отображения.
Придайте им доступность использованием элемента , или, если используется менее специфический элемент – например : добавьте в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.

Дальше вы увидите примеры и список поддерживаемых под-компонентов.

Примеры

Компоненты Offcanvas

Ниже приведен пример offcanvas, который отображается по умолчанию (через на ). Offcanvas включает поддержку заголовка с кнопкой закрытия и дополнительный класс тела для некоторого начального заполнения. Мы рекомендуем по возможности включать заголовки offcanvas с действиями по отклонению или предоставлять явное действие по отклонению.

Offcanvas

Здесь размещается контент для offcanvas. Вы можете разместить здесь практически любой компонент Bootstrap или пользовательские элементы.

Живая демонстрация

Используйте кнопки ниже, чтобы отображать и скрывать элемент offcanvas с помощью JavaScript, который переключает класс на элемент с классом .

скрывает содержимое (по умолчанию)
показывает содержимое

Вы можете использовать ссылку с атрибутом или кнопку с атрибутом . В обоих случаях требуется .

Кнопка с атрибутом data-bs-target

Вне холста

Какой-то текст в качестве заполнителя. В реальной жизни у вас могут быть элементы, которые Вы выбрали. Нравится, текст, изображения, списки и т. д.

Кнопка раскрывающегося списка

Отзывчивое поведение

Навбары могут использовать классы , и для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.

Для навбаров, которые не скрываются, добавьте в навбар класс . Для навбаров, которые всегда скрываются, не добавляйте его.

Тогглер (кнопка разворачивания меню)

Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.

Без показанного элемента класса , на самых маленьких брейкпойнтах:

С «брендом», показанный слева, и тогглером — справа:

С тогглером слева и «брендом» справа:

Внешнее содержимое

Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через и – вам будет легко это сделать!

Навигационное меню и фоновое изображение

Многие веб-разработчики на сайтах размещают после навигационного меню фоновое изображение, которое придаёт веб-странице некоторый стиль и делает дизайн сайта более завершённым. В этом разделе мы рассмотрим несколько вариантов совмещения навигационного меню и фона веб-страницы.

1 Вариант

В первом варианте заставку выполним в виде фонового изображения, на которой поместим текст и расположим её после навигационного меню. Код HTML, CSS и JavaScript приведём ниже с пояснениями.

Код HTML:

<!-- Навигационное меню -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
  ...
  </div>
</nav>

<!-- Заставка -->
<div class="splash">
  <div class="container">
    <!-- Текст, размещенный на заставке -->
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Totam rem aperiam eaque ipsa, quae ab illo inventore. Dolorum fuga deleniti 

atque corrupti, quos dolores et accusamus.</p>
  </div>
</div>

...

Код CSS:

/* Отступ сверху для содержимого body (высота navbar = 50px)*/
body
{
padding-top: 50px;
}
/* Заставка */
.splash { 
/* Отступ для содержимого, помещенного в splash */
padding:9em 0 2em;
/* Картинка, которая используются для splash */
background-image:url(../img/bg.jpg);
/* Масштабируем картинку с сохранением пропорций */
background-size:cover;
/* Запрещаем фоновому изображению прокручиваться, т.е. делаем его неподвижным */
background-attachment:fixed;
/* Цвет текста */
color:#fff;
/* Выравниваем текста внутри splash по центру */
text-align:center;
}

Код JavaScript (можно не использовать, предназначен для изменения позиции фонового изображения):

(function(){
  $(window).scroll(function () {
      // значение, на которое сместилась страница при прокрутке
      var top = $(document).scrollTop();
      $('.splash').css({
        //задаём позицию фонового изображения 
        'background-position': '0px -'+(top/3).toFixed(2)+'px'
      });
  });
})();

2 Вариант

Во втором варианте фоновое изображение для веб-страницы создадим с помощью плагина Backstretch. Он предназначен для автоматической подгонки, установленного в качестве параметра изображения под размеры веб-страницы.

Код HTML:

<nav class="navbar navbar-default navbar-fixed-top">
  <!-- ... -->
</nav>

<div class="article container">
  <div class="row">
    <div class="col-md-8">
      <h1 class="h2 page-header">Заголовок страницы</h1>
      <!-- ... -->
    </div>
    <div class="col-md-4">
      <!-- ... -->
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <!-- ... -->
  </div>
</footer>

<!-- Подключаем плагин Backstretch -->
<script src="js/jquery.backstretch.min.js"></script>
<script>
    // Устанавливаем изображение, которое будет являться фоном веб-страницы 
    $.backstretch("img/bg.jpg");
</script>

Код CSS:

/* Отступ сверху для содержимого body */
body {
padding-top:250px;
}

/* Прозрачный фон для основного содержимого */
.article {
background:rgba(255,255,255,0.88);
padding-top: 20px;
margin-bottom: 10px;
}

/* Стили для подвала страницы */
footer {
background:rgba(255,255,255,0.7);
line-height: 30px;
padding: 0 15px 0 15px;
}

Bootstrap Navbar — Анимация кнопки меню

Примеры кода, с помощью которых вы можете «оживить» кнопку «Гамбургер».

1 вариант (анимация в иконку закрытия):

.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 10% 10%;
  -ms-transform-origin: 10% 10%;
  transform-origin: 10% 10%;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  opacity: 0;
  filter: alpha(opacity=0);
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 10% 90%;
  -ms-transform-origin: 10% 90%;
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
  opacity: 1;
  filter: alpha(opacity=100);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}

2 вариант (анимация в стрелочку, направленную вверх):

.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
  transform: translate3d(0,0,0) rotate(0deg);
  width: 22px;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
  transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
  transform: translate3d(0,0,0) rotate(0deg);
  width: 22px;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
  transform: translate3d(1px,0,0) rotate(-45deg);
  transform-origin: center center;
  width: 11px;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  transform: rotate(-90deg);
  transform-origin: center center;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  transform: translate3d(0px,-14px,0) rotate(-135deg);
  transform-origin: right top;
  width: 11px;
}