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

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

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

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

<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.

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

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

Понравилась статья? Поделиться с друзьями:
Комментариев: 1
  1. Дмитрий

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: