Изначальные установки Одинаковая разметка, разные классы
Все навигационные компоненты—вкладки, кнопки и списки—имеют одинаковую HTML-разметку и родительский класс .nav.
Вкладки
Используйте в качестве вкладок <ul> список, и дополнительный класс в родительском элементе .nav-tabs:
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Главная</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
Навигационные кнопки
Используйте HTML-код из предыдущего примера, но вместо класса .nav-tabs используйте .nav-pills:
<ul class="nav nav-pills">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
Отключенное состояние
Для любого элемента навигации (вкладки, кнопки или списки), добавьте класс .disabled для изменения стилей - серый шрифт и отсутвие анимации при наведении курсора. Тем не менее ссылки и элементы останутся кликабельными, до тех пор пока Вы не уберете атрибут href. Либо управляя элементами через JavaScript.
<ul class="nav nav-pills">
...
<li class="disabled"><a href="#">Главная</a></li>
...
</ul>
Выравнивание элементов
Для выравнивания навигации используйте классы .pull-left или .pull-right. Оба класса добавляют условие CSS float left или right.
Навигационный стек
По умолчанию вкладки и кнопки располагаются горизонтально, добавьте класс .nav-stacked для вертикального отображения.
Стек вкладок
<ul class="nav nav-tabs nav-stacked">
...
</ul>
Стек кнопок
<ul class="nav nav-pills nav-stacked">
...
</ul>
Выпадающие списки
Выпадающее меню в Bootstrap вкладках и навигационных кнопках. Незабудте добавить jQuery плагин.
JS-плагин выпадающих списков dropdowns JS-плагин.
Вкладки с выпадающим списком
<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
</ul>
</li>
</ul>
Кнопки с выпадающим списком
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
</ul>
</li>
</ul>
Навигационный список Он же Сайдбар
Навигационный список позволяет создать легкую и удобную в использовании навигацию с дополнительными заголовками. Такой сайдбар используется в Finder в MAC OS X.
Пример навигационного списка
К списку ссылок и добавьте классы - class="nav nav-list":
<ul class="nav nav-list">
<li class="nav-header">Заголовок</li>
<li class="active"><a href="#">На главную</a></li>
<li><a href="#">Библиотека</a></li>
...
</ul>
Замечание
Для вложения в навигационные списки, применяйте классы class="nav nav-list" только к вложенным элементам - <ul>.
Горизонтальный разделитель
Добавьте горизонтальный разделитель с помощью пустого элемента списка с классом .divider, пример:
<ul class="nav nav-list">
...
<li class="divider"></li>
...
</ul>
Вкладки как навигация
Оживим наши вкладки при помощи JS-плагина для простого переключения между контентом. Bootstrap включает в себя четыре стиля расположения вкладок: вверху (по умолчанию), справа, внизу и слева от контента.
Пример вкладок
p>Для создания переключаемых вкладок создайте .tab-pane с уникальным ID для каждой вкладки и поместите их в элемент с классом .tab-content.
Как дела? Это 3-я секция.
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Вкладка 1</a></li>
<li><a href="#tab2" data-toggle="tab">Вкладка 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Я первая секция.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Привет, я 2-я секция.</p>
</div>
</div>
</div>
"Fade in" вкладки
Для плавного переключения между вкладками, добавьте класс .fade к каждому с классом .tab-pane.
jQuery плагин
Все вкладки управляются jQuery плагином. Изучите больше о javascript плагине.
Пример стилей вкладок
Расположение внизу
Переверните представление посетителей Ваших проектов о вкладках. Разместив их снизу.
<div class="tabbable tabs-below">
<div class="tab-content">
...
</div>
<ul class="nav nav-tabs">
...
</ul>
</div>
Вкладки слева
Добавьте класс .tabs-left для размещения вкладок слева относительно контента.
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
Вкладки справа
Добавьте класс .tabs-right для размещения вкладок справа относительно контента.
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>