Бешеный конкурс!
12:10
Автор: Рубрика: Bootstrap Комментариев нет

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

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

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

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

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

Комментариев нет