Twitter Bootstrap — вкладки

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

Bootstrap JQuery табы

Инструкция:

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 -->

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

Скачать
Опубликовано 18-03-2013 в 09:47


Комментариев к записи: 3

  1. mich:

    не указал ширину контейнера bootstrap!

  2. Владимир:

    А как теперь будет выглядеть ссылка для перехода например на третью вкладку? Я думал наисать site.ru#tab3 — нифига!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты