Как делаются с помощью 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).

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

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

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