Bootstrap 4 навигации
Навигационные меню
Если вы хотите создать простое горизонтальное меню, добавьте
.navкласс к <ul>элементу, а затем .nav-item
для каждого <li>и добавьте .nav-linkкласс к их ссылкам:
Пример
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Выровненная навигация
Добавьте .justify-content-centerкласс, чтобы центрировать навигацию, и .justify-content-endкласс, чтобы выровнять навигацию по правому краю.
Пример
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Вертикальная навигация
Добавьте .flex-columnкласс для создания вертикальной навигации:
Пример
<ul class="nav
flex-column">
Вкладки
Превратите навигационное меню в навигационные вкладки с .nav-tabsклассом. Добавьте .activeкласс к активной/текущей ссылке. Если вы хотите, чтобы вкладки можно было переключать, см. последний пример на этой странице.
Пример
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Таблетки
Превратите навигационное меню в навигационные таблетки вместе с .nav-pillsклассом. Если вы хотите, чтобы таблетки можно было переключать, см. последний пример на этой странице.
Пример
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Оправданные вкладки/таблетки
Выровняйте вкладки/таблетки с .nav-justifiedклассом (равной ширины):
Пример
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Таблетки с выпадающим списком
Пример
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Вкладки с раскрывающимся списком
Пример
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Переключаемые / динамические вкладки
ДОМОЙ
Боль важна сама по себе, но боль усиливается в процессе отложения жировых отложений, но я даю время, чтобы уменьшить ее, чтобы проделать большую работу и боль.
Чтобы сделать вкладки переключаемыми, добавьте data-toggle="tab"атрибут к каждой ссылке. Затем добавьте .tab-paneкласс с уникальным идентификатором для каждой вкладки и оберните их внутри
<div>элемента с классом .tab-content.
Если вы хотите, чтобы вкладки исчезали и исчезали при нажатии на них, добавьте
.fadeкласс в .tab-pane:
Пример
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Переключаемые / динамические таблетки
ДОМОЙ
Боль важна сама по себе, но боль усиливается в процессе отложения жировых отложений, но я даю время, чтобы уменьшить ее, чтобы проделать большую работу и боль.
Тот же код применяется к таблеткам; только измените атрибут data-toggle на data-toggle="pill":
Пример
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Полный справочник по Bootstrap 4 Nav
Полную справку обо всех параметрах вкладок, методах и событиях см. в нашем Справочнике по вкладкам Bootstrap 4 JS .