Уроки Bootstrap

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

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

В этом уроке мы с вами ознакомимся с плагином tabs.js и научимся создавать вкладки на сайт. Благодаря вкладкам можно удобно структуризировать информацию на сайте, а главное делается подобное очень быстро и просто!

Видеоурок

Полезная ссылка:
Докачать tabs.js

Исходный код

Вкладки или же табы
<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>

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

Загрузка...

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

Работа со вкладками
Сделайте 5 вкладок. Изначально активной будет 1 вкладка, вкладки отображаются не как кнопки. В первой вкладке должна быть кнопка, в остальных какая-угодно другая информация.
Посмотреть ответ
Вы могли сделать нечто подобное:
<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab_1" data-toggle="tab">Вкладка №1</a></li>
    <li><a href="#tab_2" data-toggle="tab">Вкладка №2</a></li>
    <li><a href="#tab_3" data-toggle="tab">Вкладка №3</a></li>
    <li><a href="#tab_4" data-toggle="tab">Вкладка №4</a></li>
    <li><a href="#tab_5" data-toggle="tab">Вкладка №5</a></li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab_1">
      <br>
      <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 месяца

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

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