Twitter Bootstrap — вкладки

Первая заметка из серии, посвященной детальному знакомству с CSS-фреймворком под названием Twitter Bootstrap. Сегодня я покажу читателям, как можно создавать простые горизонтальные вкладки / табы.

Инструкция:

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

<link href="css/bootstrap.css" rel="stylesheet">
<!-- 
Делаю небольшой отступ от начала окна с удалением 
пунктирной линии у той вкладки, которая получила фокус:
P.S. Это необязательно.
-->
<style>
  .container { margin-top:80px; }
  .nav-tabs li a:focus { outline:none; }
</style>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Для обработки вкладок: -->
<script src="js/bootstrap-tab.js"></script> 
<!-- Чтобы старые версии IE "понимали" HTML5: -->
<!--[if lt IE 9]>
  <script src="js/html5.js"></script>
<![endif]-->

2. Во-вторых остается всего-навсего создать необходимую разметку веб-страницы на HTML (опущены такие моменты, как например сеточная система бутстрапа). Для выделения активного таба используется класс .active. Также обратите внимание на якори типа #s1:

<div class="tabbable">  
  <ul class="nav nav-tabs">  
    <li class="active"><a href="#s1" data-toggle="tab">Первая секция</a></li>  
    <li><a href="#s2" data-toggle="tab">Вторая секция</a></li>  
    <li><a href="#s3" data-toggle="tab">Третья секция</a></li>  
  </ul>  
  <div class="tab-content">  
    <div class="tab-pane active" id="s1">  
      <p>Сейчас вы просматриваете содержимое первой секции.</p>  
    </div>  
    <div class="tab-pane" id="s2">  
      <p>Сейчас вы просматриваете содержимое второй секции.</p>  
    </div>  
    <div class="tab-pane" id="s3">  
      <p>Сейчас вы просматриваете содержимое третьей секции.</p>  
    </div>  
  </div>    
</div><!-- /.tabbable -->

На этом собственно все. Плюс специально для ленивых халявщиков, — скачать пример можно вот здесь:

Скачать