Уроки Bootstrap

#13 - Создание вкладок, табов (tabs.js)

#13 - Создание вкладок, табов (tabs.js)

Bootstrap предлагает готовые скрипты для создания вкладок при помощи плагина tabs.js. За урок мы установим плагин, изучим работу с ним, а также создадим несколько примеров вкладок и табов на основе данной библиотеки.

Видеоурок

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

Исходный код

Вкладки или же табы
<br>
<div class="container">
  <ul class="nav nav-pills" role="tablist">
    <li><a href="#home" role="tab" data-toggle="pill">Домой</a></li>
    <li><a href="#profile" role="tab" data-toggle="pill">Профиль</a></li>
    <li class="active"><a href="#message" role="tab" data-toggle="pill">Сообщения</a></li>
    <li><a href="#settings" role="tab" data-toggle="pill">Настройки</a></li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade" id="home">Вкладка домой</div>
    <div role="tabpanel" class="tab-pane fade" id="profile">Вкладка профайл</div>
    <div role="tabpanel" class="tab-pane active fade in" id="message">Вкладка с сообщениями</div>
    <div role="tabpanel" class="tab-pane fade" id="settings">Вкладка с настройками</div>
  </div>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
$('a[data-toggle="pill"]').on('hidden.bs.tab', function (e) {
  console.log(e.target); // вкладка, которая стала активной
  console.log(e.relatedTarget); // предыдущая активная вкладка
})
</script>

Онлайн редактор кода

Загрузка...

Задание к уроку

Переключение между вкладками

Создайте переключение между вкладки как на фото ниже:


Посмотреть ответ

Решение задания:

<div class="container m-3">
	<div class="btn-group btn-group-xs">
		<a href="#tab_1" data-toggle="tab_1" class="btn btn-success">Вкладка №1</a>
		<a href="#tab_2" data-toggle="tab" class="btn btn-primary">Вкладка №2</a>
		<a href="#tab_3" data-toggle="tab" class="btn btn-outline-info">Вкладка №3</a>
		<a href="#tab_4" data-toggle="tab" class="btn btn-danger">Вкладка №4</a>
		<a href="#tab_5" data-toggle="tab" class="btn btn-warning">Вкладка №5</a>
	</div>
	
	<!-- Класс mt-4 (margin-top) добавляет отступ сверху -->
	<div class="tab-content mt-4">
		<div role="tabpanel" class="tab-pane active" id="tab_1">
			<button type="button" class="btn btn-success">Первая вкладка</button>
		</div>
		<div role="tabpanel" class="tab-pane" id="tab_2">Вкладка под номером 2</div>
		<div role="tabpanel" class="tab-pane" id="tab_3">Вкладка под номером 3</div>
		<div role="tabpanel" class="tab-pane" id="tab_4">Вкладка под номером 4</div>
		<div role="tabpanel" class="tab-pane" id="tab_5">Вкладка под номером 5</div>
	</div>
</div>

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Современная вёрстка адаптивного веб-сайта
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Создание блога на Ruby On Rails
8 уроков
Уроки Python Django / Создание сайта
12 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Комментарии для сайта Cackle