Вкладки Bootstrap для сайта
На этом уроке научимся создавать вкладки для сайта с помощью компонента Bootstrap Tabs.
О компоненте Tabs
Tabs – это js-компонент фреймворка Bootstrap, предназначенный для добавления на страницу вкладок.
Табы состоят из 2 частей: самих вкладок и контента.
Вкладки используются, когда контент нужно показывать не сразу весь целиком, а определёнными порциями. Переключение между этими порциями осуществляется посредством вкладок.
Что дают вкладки для сайта? Во-первых, они улучшают организацию данных на странице и её внешний вид. Доступ к информации становится более простым и понятным. Во-вторых, занимая определённую часть страницы они позволяют разместить на ней намного больше информации. Страница становится более компактной и в ней намного проще ориентироваться.
Создание вкладок на фреймворке Bootstrap
Создание вкладок в Bootstrap 4 начинается с создания самих вкладок .
Для этого необходимо создать список ul с классами nav и nav-tabs . После этого в ul нужно поместить определённое количество элементов li с классом nav-item . Их количество должно соответствовать количеству вкладок, которые мы хотим создать.
Затем в каждый элемент li необходимо вложить ссылку с классом nav-link , атрибутом data-toggle=»tab» и href . В href следует указать ссылку на блок, который она будет показывать (связан с ней). Содержимое элемента a будет являться названием вкладки. Кроме этого, к одной из ссылок следует добавить класс active . Этот класс будет определять вкладку, которая должна быть выделенной (активной) по умолчанию.
После создания самих вкладок необходимо создать блоки с контентом , которые будут переключаться с помощью них.
Для этого нужно создать элемент с классом tab-content . Он будет являться контейнером. В нём необходимо создать блоки div с классом tab-pane и атрибутом id . Значение id должно определять вкладку, связанную с этим блоком. К блоку, содержимое которого необходимо отображать по умолчанию, необходимо добавить классы show и active . При желании к блокам также можно добавить класс fade . Это подключит к ним анимацию и сделает их переключение более плавным.
После этого в каждый из этих блоков следует поместить определённый контент, который нужно будет отображать при активности той или иной вкладки.
В Bootstrap 3 HTML-разметка и вид вкладок немного отличается от 4 версии. Пример, приведённый выше, в Bootstrap 3 будет выглядеть следующим образом:
В этих примерах активирование компонента Tabs (логики на JavaScript, применительно к этим элементам) выполнялось с помощью атрибута data-toggle=»tab» .
А определение того, какая вкладка какой контент должна показывать устанавливалась посредством атрибута href для самой вкладки и id для блока с контентом.
Включение табов c помощью JavaScript
Активировать табы можно не только посредством атрибута data-toggle=»tab» , но и с помощью написания кода на JavaScript.
В этом случае добавлять к ссылкам атрибут data-toggle=»tab» не нужно.
Отображение вкладки в этом случае будет выполняется посредством вызова метода tab(‘show’) . Этот метод нужно будет вызывать для соответствующей вкладки (ссылки) каждый раз, когда пользователь нажмёт на неё.
Это, например, можно реализовать посредством добавления следующего скрипта на страницу:
При необходимости метод tab(‘show’) вы можете использовать также, когда вам необходимо программно переключить вкладку.
События компонента Tabs
При открытии и переключении вкладок данный компонент генерирует определённые виды событий.
Всего их 4 и генерируются они в следующем порядке (при переключении вкладок):
- hide.bs.tab – перед скрытием текущей активной вкладки, которая через некоторое время будет не активной;
- show.bs.tab – перед отображением вкладки, которая через некоторое время будет активной;
- hidden.bs.tab – после скрытия предыдущей активной вкладки (т.е. той, которая была в событии hide.bs.tab );
- shown.bs.tab – после отображения новой активной вкладки, которая сейчас будет отображаться пользователю.
Если ни одна из вкладок (tab) ещё не была активной, то события hide.bs.tab и hidden.bs.tab генерироваться не будут.
Эти события нужно использовать, когда вам нужно выполнить некоторые действия при их наступлении.
Пример, в котором показано работа с событиями компонента Tabs:
Дополнительные материалы
В этом разделе представлена следующая информация:
Табы, вкладки которых имеют выпадающее меню
В Bootstrap к вкладкам при необходимости можно добавить выпадающее меню. Кроме этого, если некоторые вкладки нужно сделать не активными, то к ним можно добавить класс disabled .
Добавление aria-атрибутов в разметку
Если вы хотите сделать сайт более доступным для людей с ограниченными возможностями, то данную разметку следует дополнить aria-атрибутами .
Эти атрибуты предназначены для специальных приложений, например экранных дикторов, с помощью которых пользователи прослушивают страницы.
Для этого к вкладкам необходимо добавить role=»tablist» , role=»tab» , role=»tabpanel» и дополнительные aria-атрибуты с помощью которых передать пользователям специальных приложений структуру, функциональность и текущее состояния табов.
Комментарии:
Здравствуйте, Александр. Подскажите, вкладки реализованы на bootstrap3. Мне необходимо, чтобы вкладки фиксировались при прокрутке наверху в мобильной версии, что было реализовано следующим скриптом. Проблема в том, что при переключении вкладок наверху содержимое отображается не с начала, а того места где закончился просмотр предыдущей вкладки. Как сделать чтобы при клике на вкладку инфо отражалось бы полностью.
Источник
