Как делаются с помощью Bootstrap табы?

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

Стандартный пример кода, который я взял из документации, выглядит так:

<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Вкладка 1</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Вкладка 2</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Вкладка 3</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Вкладка 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Контент вкладки 1</div>
<div class="tab-pane" id="profile">Контент вкладки 2</div>
<div class="tab-pane" id="messages">Контент вкладки 3</div>
<div class="tab-pane" id="settings">Контент вкладки 4</div>
</div>
<script>
$(function () {
$('#myTab a:last').tab ('show')
})
</script>

  1. Итак, код для реализации стандартных переключаемых вкладок можно разделить на 3 части:
    Меню (ul с классами, ролью и идентификатором), то есть сами ссылки, при клике по которым происходит смена содержимого в блоке.
  2. Собственно, сам контент для каждой вкладки. Связь происходит таким образом: ссылке задается атрибут href с названием идентификатора нужного блока контента.
  3. Скрипт

Вот результат:
вкладки
Переключение переходит кликом мыши. Переходим на третью вкладку:
третья вкладка
Как видите, к ней сразу же применяются активные стили, а также меняется контент. Давайте в четвертую вкладку добавим изображение:

<div class="tab-pane" id="settings"><img width = "400" src = "auto.jpg"></div>

изображение во вкладке

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

Изменение стилей вкладок

Собственно, стилизация табов (вкладок) происходит с помощью класса nav-tabs. Если вы просмотрите код выше, то увидите, что он должен нашему списку (ul).

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

В Bootstrap заложен еще один вариант оформления. Чтобы активировать его, замените стилевой класс nav-tabs на nav-pills. Вот как теперь будет выглядеть активная вкладка:
второй стиль

Ну а как сделать свое оформление для вкладок? Очень просто, создайте свой style.css и подключите его к сайту. В нем создайте свой собственный класс оформления. Например, nav-custom-tabs.

.nav-custom-tabs{
	float: left;
}

И вот вкладки уже вертикальные:
вертикальные вкладки

Комментариев: 2
  1. Григорий

    Огромное спасибо! Табы работают как часы! Добавляю их в статьи в ИМ на опенкарт

  2. Дмитрий

    Спасибо, как раз то что искал. smile

Добавить комментарий