Bootstrap: вкладки

4 минуты на чтение

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

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

Необходимые библиотеки

Для организации работы динамических вкладок на Bootstrap потребуется подключение трех библиотек:

  • CSS- непосредственно стили Bootstrap (bootstrap.min.css),
  • JS – библиотека jQuery,
  • JS – библиотека JS Bootstrap (bootstrap.min.js или bootstrap.bundle.js) .

Минимальная разметка

Со всеми вариантами разметки можно подробно ознакомиться в документации к Bootstrap. В данном примере для организации вкладок будем использовать список.

Итак, необходимая для работы разметка:

Вся разметка размещена в родительском контейнере с классом .container. Разметка для динамических вкладок состоит из двух секции: навигации и контента.

Для организации панели навигации в нашем случае использован неупорядоченный список с классом .nav-tabs. Для работы вкладок, помимо классов, необходимо указать  параметр data-toggle=”tab”. Ссылка должна указывать на id заданной секции контента. При наличии активного по умолчанию элемента меню, не забудьте добавить ему класс .active.

Секция контента располагается в блоке с классом .tab-content. Контент каждой секции заключается в блок с классом .tab-pane. Для секции с активным элементом меню указываем класс .show  и .active. Содержимое и разметка контента может быть каким угодно. Для анимации при переключении необходимо добавить класс .fade.

Результат должен быть таким:

Особенности

При размещении в меню элементов с выпадающим списком необходимо подключить библиотеку popper.js или полную сборку Bootsrap bootstrap.bundle.js.

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

Пример #1

See the Pen
WOV_BS_tabs by Paul (@1110000)
on CodePen.

Facebook Vk Ok Twitter Telegram

Похожие записи:

Продолжим верстку ранее начатого макета на Bootstrap 4, подробнее здесь. Рассмотрим как разбить макет на секции, оформить их и сделать более удобной прокрутку на сайте. Техническое задание Функционал: плавная прокрутка Требования к верстке: г...
С учетом возрастания количества, а в некоторых случаях преобладания, на сайтах посетителей, заходящих с мобильных устройств, адаптивное меню становится обязательной составляющей сайта. Bootstrap 4 включает отличный инструмент для создания  адаптивного меню – к...
Модальные окна, такие полезные, а иногда, такие надоедливые, являются популярным элементом пользовательского интерфейса. Модальное окно – это окно, блокирующее работу с приложением, до тех пор пока его не закроют. Область применения достаточно велика: диалогов...