Создание вкладок (табов) в Bootstrap

Мы уже проходили создание кнопок меню в виде вкладок, но вот пришло время и до самих вкладок. Давайте посмотрим на демо.

Что мы имеем:

1. Список из заголовков
2. Абзацы с кнопками "read more"

А в коде это выглядит так

<ul>
    <li><a href="#"><span class="glyphicon glyphicon-pushpin"></span> Vaccinations</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-ok"></span> Checkups</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-heart"></span> Senior Pets</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-cutlery"></span> Diet Plans</a></li>
 </ul>

 <!-- Vaccinations -->
 <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p>
 <p><a href="#" class="btn btn-info">Read more >></a></p>

 <!-- Checkups -->
 <p>Regular checkups are a key factor in pet wellness, and can often unearth problems that could lead to health issues down the road.  </p>
 <p><a href="#" class="btn btn-info">Read more >></a></p>

 <!-- Senior Pets -->
 <p>Senior pets generally require more medical attention than their younger counterparts, just as senior humans do. So when is a pet considered “senior”? </p>
 <p><a href="#" class="btn btn-info">Read more >></a></p>

 <!-- Diet Plans -->
 <p>Wisdom veterinarians have all had extensive training in pet nutrition and are your best resources when considering changing your pet’s diet. </p>
 <p><a href="#" class="btn btn-info">Read more >></a></p>

Давайте сделаем из этого всего вкладки.

Первым делом зададим нашему списку вид вкладок. Благо, такое раньше мы уже делали, когда изучали меню

<ul class="nav nav-tabs">
    ...
</ul>

Теперь нам нужно добавить в каждый тег <a> data-toggle="tab", чтобы указать, что при клике будут открываться некоторые блоки.

<a href="#" data-toggle="tab">...</li>

Теперь нам нужно идентифицировать, какие блоки будут открываться и при нажатии по каким ссылкам и делать мы это будем с помощью id. Сначала давайте в списке зададим, какая ссылка и за какой блок будет отвечать и добавим #vacc, #checkups, #senior, #diet соответственно, хотя эти названия можно взять совершенно любые.

<li><a href="#vacc" data-toggle="tab"><span class="glyphicon glyphicon-pushpin"></span> Vaccinations</a></li>
<li><a href="#checkups" data-toggle="tab"><span class="glyphicon glyphicon-ok"></span> Checkups</a></li>
<li><a href="#senior" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span> Senior Pets</a></li>
<li><a href="#diet" data-toggle="tab"><span class="glyphicon glyphicon-cutlery"></span> Diet Plans</a></li>

Теперь давайте весь наш контент засуним в контейнер с классом .tab-content

<div class="tab-content">    
     <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p>
     ...
     <p><a href="#" class="btn btn-info">Read more >></a></p>
</div>

А потом каждый отдельный таб обернем в свой контейнер с классом tab-pane fade. Первому блоку зададим дополнительно класс active in, чтобы он был сразу активным. И еще дадим каждому блоку id, соответствующий href="#..." в нашем списке.

<div class="tab-pane fade active in" id="vacc">
     <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p>
     <p><a href="#" class="btn btn-info">Read more >></a></p>
</div>

 <!-- Checkups -->
<div class="tab-pane fade" id="checkups">
     <p>Regular checkups are a key factor in pet wellness, and can often unearth problems that could lead to health issues down the road.  </p>
     <p><a href="#" class="btn btn-info">Read more >></a></p>
</div>
......................

Ну все, вроде как табы работают, но при загрузке страницы у нас не выделена сразу активная вкладка, давайте это исправим с помощью jQuery()

<script>
    $(function () {
        $('.nav-tabs a:first').tab('show');
    });
</script>

И чтобы совсем было классно, добавим в custom.css немного стилей

.tab-pane {
    border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;	
	border-bottom: 1px solid #ddd;
	padding: 0.8em;
}

/* remove this style */
.glyphicon-pushpin, 
.glyphicon-heart {
	color: #3F2B22;
}

/* add these styles */

.glyphicon {
	color: #3F2B22;
}
.active .glyphicon {
	color: #cdae51;
}

Вот и все, смотрим, что у нас получилось

Демо скачать урок