Класс .nav (и связанные с ним классы) позволяет превратить список во вкладки и навигационные «таблетки».
Чтобы создать вкладку или таблетку, добавьте класс .nav и либо .nav-pills, либо .nav-tabs к элементу <ul>, содержащий список элементов навигации.
Однако использование <ul> не является обязательным — вы можете просто использовать свою собственную навигацию.
Базовая навигация
Bootstrap 5 предлагает базовый стиль, который можно использовать с элементами навигации. Вы можете либо добавить дополнительные стили Bootstrap к этой базе, либо настроить её в соответствии со своими потребностями.
Базовый компонент навигации использует класс .nav для внешнего элемента навигации, такого как элемент <ul> или <nav>.
Для элементов <ul>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Просмотр</a>
</li>
</ul>
Для элементов <nav>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<nav class="nav">
<a class="nav-link active" href="#">HTML</a>
<a class="nav-link" href="#">CSS</a>
<a class="nav-link" href="#">JavaScript</a>
<a class="nav-link" href="#">Просмотр</a>
</nav>
Вертикальная навигация
Добавьте класс .flex-column к элементу .nav, чтобы расположить элементы навигации вертикально.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<nav class="nav flex-column">
<a class="nav-link active" href="#">HTML</a>
<a class="nav-link" href="#">CSS</a>
<a class="nav-link" href="#">JavaScript</a>
<a class="nav-link" href="#">Просмотр</a>
</nav>
Вкладки
Добавьте class="nav nav-tabs" к элементу <ul>, содержащий список пунктов навигации. Также используйте class="active", чтобы сделать вкладку выделенной.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Просмотр</a>
</li>
</ul>
Таблетки
Измените класс .nav-tabs на .nav-pills, чтобы вместо вкладок отображались таблетки.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Просмотр</a>
</li>
</ul>
Таблетки по вертикали
Как и с любой навигацией, вы можете расположить таблетки вертикально, добавив служебный класс .flex-column в список классов.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Просмотр</a>
</li>
</ul>
Выравнивание по горизонтали
По умолчанию навигация выровнена по левому краю, но вы можете использовать служебные классы для их выравнивания. К примеру, вы можете указать .justify-content-center, чтобы выровнять навигацию по центру.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="nav justify-content-center">
<a class="nav-link active" href="#">HTML</a>
<a class="nav-link" href="#">CSS</a>
<a class="nav-link" href="#">JavaScript</a>
<a class="nav-link" href="#">Просмотр</a>
</ul>
Отключение ссылок
Вы можете добавить класс .disabled, чтобы вкладка или таблетка казалась отключенной.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Просмотр</a>
</li>
</ul>
Вкладки с выпадающим меню
Вы можете добавить выпадающее меню на вкладку или таблетку. В этом случае класс .dropdown применяется к элементу <li> (а не к элементу <div>).
Вкладки
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Просмотр</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Телефон</a></li>
<li><a class="dropdown-item" href="#">Планшет</a></li>
<li><a class="dropdown-item" href="#">Ноутбук</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Компьютер</a></li>
</ul>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Таблетки
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Просмотр</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Телефон</a></li>
<li><a class="dropdown-item" href="#">Планшет</a></li>
<li><a class="dropdown-item" href="#">Ноутбук</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Компьютер</a></li>
</ul>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Панели с вкладками
Вы даже можете использовать Bootstrap для создания панелей содержимого с вкладками.
Для этого убедитесь, что каждый тег <a> в навигации содержит data-bs-toggle="tab" или data-bs-toggle="pill" (в зависимости от того, используете ли вы вкладки или таблетки). Затем под списком вкладок добавьте <div> с классом .tab-content, который будет хранить содержимое. Затем для каждой его части вложите ещё один <div> с классом .tab-pane.
Кроме того, вы можете сделать так, чтобы вкладки появлялись плавно, добавив класс .fade к каждому .tab-pane. Первая (или активная панель) также должна содержать класс .show для правильного появления начального содержимого.