Bootstrap 4 Navs
Навигационные меню
Если вы хотите создать простое горизонтальное меню, добавьте
.nav class to a <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 класс для центрирования NAV и .justify-content-end класс для выравнивания по правому краю NAV.
Пример
<!-- 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 класса. Добавьте активный класс к активной/текущей ссылке. Если вы хотите, чтобы вкладки были переключены, смотрите последний пример на этой странице.
Пример
<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>
Переключаемые / динамические вкладки
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 :
Пример
<!-- 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>
Переключаемые / динамические таблетки
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Тот же код применяется к таблеткам; только измените атрибут 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.