Bootstrap Вкладки и pill
Меню
Большинство веб-страниц имеют какое-то меню.
В HTML, меню часто определяется в неупорядоченный список <ul> (и стиль после этого), как это:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Если вы хотите создать горизонтальное меню из списка выше, добавьте
.list-inline класс для <ul>:
<ul class="list-inline">
Или вы можете отобразить меню выше с вкладки и таблетки bootstraps (см. ниже).
Примечание: Смотрите последний пример на этой странице, чтобы узнать, как сделать вкладки и таблетки переключаемый/динамический.
Вкладки
Вкладки создаются с помощью <ul class="nav nav-tabs">:
Совет: Также отметьте текущую страницу <li class="active">.
В следующем примере создаются вкладки навигации:
Пример
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Вкладки с выпадающим меню
Вкладки также могут содержать выпадающие меню.
В следующем примере добавляется раскрывающееся меню для "Menu 1":
Пример
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Таблетки
Таблетки создаются с <ul class="nav nav-pills">. Также отметьте текущую страницу
<li class="active">:
Пример
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Вертикальные pill
Таблетки также могут отображаться вертикально. Просто добавьте .nav-stacked Класс:
Пример
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Вертикальные pill в ряд
Text...
Text...
Text...
В следующем примере помещается меню вертикальной таблетки внутри последнего столбца. Так, на большом экране меню будет отображаться справа. Но на маленьком экране, содержание автоматически подстраивается в одну колонку макета:
Пример
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
pill с выпадающим меню
pill также могут содержать выпадающие меню.
В следующем примере в меню "1" добавляется раскрывающееся меню:
Пример
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Центрированные вкладки и pill
Для центрирования/выравнивания вкладок и таблеток используйте .nav-justified класс.
Обратите внимание, что на экранах, которые меньше, чем 768px, элементы списка укладываются (содержимое будет оставаться в центре):
Пример
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Переключаемые/динамические вкладки
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Чтобы сделать вкладки переключаемыми, добавьте data-toggle="tab" атрибут к каждой ссылке.
Затем добавьте .tab-pane класс с уникальным идентификатором для каждой вкладки и оберните их внутри <div> элемента с классом .tab-content.
Если вы хотите, чтобы вкладки исчезают и выводились при щелчке на них, добавьте
.fade класс в .tab-pane:
Пример
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Переключаемые/динамические таблетки
Тот же код применяется к таблеткам; только измените атрибут Data-Toggle на data-toggle="pill":
Пример
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Полная справка на навигацию Bootstrap
Для полного справочника всех классов навигации, перейдите к нашей полной справка на навигацию Bootstrap.
Для полной ссылки на все опции вкладки, методы и события, перейдите на наш справка на вкладку Bootstrap JS.
