Класс .nav (и связанные с ним классы) позволяет превратить список во вкладки и навигационные «пилюли». Чтобы создать вкладку или пилюлю, добавьте класс .nav, а также класс .nav-pills либо .nav-tabs к элементу <ul>, содержащему список пунктов навигации.
Однако применение <ul> не является обязательным — вы также можете легко использовать навигацию для других элементов.
Базовая навигация
Bootstrap 4 предлагает базовый стиль, который используется для пунктов навигации. К этому базовому стилю можно добавить дополнительные стили Bootstrap или настроить его в соответствии со своими потребностями.
Компонент навигации использует класс .nav для внешнего элемента, такого как элемент <ul> или <nav>.
Для элемента <ul>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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>
Bootstrap 4 против Bootstrap 3
- Bootstrap 3 не использует классы .nav-item или .nav-link.
- Bootstrap 4 требует, чтобы элемент .nav применялся ко всем элементам <li>.
- Bootstrap 4 требует применения .nav-link к элементу <a>.
- Bootstrap 3 требует применения любого класса .active к элементу <li>.
- Bootstrap 4 требует применения любого класса .active к элементу <a>.
Вертикальная навигация
Добавьте служебный класс .flex-column к элементу .nav для вертикального размещения пунктов навигации.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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>
Отключенные ссылки
Вы можете добавить класс .disabled для отключения вкладки или пилюли.
Обратите внимание, что навигация только выглядит отключенной. На деле никакая функциональность элемента <a> не отключается, поэтому вам нужно будет использовать другие средства для фактического отключения этого элемента (например, JavaScript).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
role="button" aria-haspopup="true" aria-expanded="false">Просмотр</a>
<div class="dropdown-menu" aria-labelledby="Просмотр">
<a class="dropdown-item" href="#">Мобильник</a>
<a class="dropdown-item" href="#">Планшет</a>
<a class="dropdown-item" href="#">Ноутбук</a>
<a class="dropdown-item" href="#">Настольный</a>
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Пилюли
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
role="button" aria-haspopup="true" aria-expanded="false">Просмотр</a>
<div class="dropdown-menu" aria-labelledby="Просмотр">
<a class="dropdown-item" href="#">Мобильник</a>
<a class="dropdown-item" href="#">Планшет</a>
<a class="dropdown-item" href="#">Ноутбук</a>
<a class="dropdown-item" href="#">Настольный</a>
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Вкладки с панелями
Вы также можете использовать Bootstrap для создания вкладок с панелями содержимого. Для этого убедитесь, что у каждого <a> в навигации есть data-toggle="tab" или data-toggle="pill" (в зависимости от того, используете вы вкладки или пилюли). Затем, под списком вкладок, добавьте <div> с классом .tab-content для содержимого. После этого для каждого фрагмента содержимого создайте ещё один вложенный элемент <div> с классом .tab-pane.
Кроме этого, вы можете сделать чтобы вкладки появлялись плавно, добавив класс .fade к каждой панели .tab. Первая панель вкладок (или активная панель вкладок) также должна иметь класс .show для правильного затухания исходного содержимого.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<ul id="clothing-nav" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home" id="home-tab" role="tab"
data-toggle="tab" aria-controls="home" aria-expanded="true">Главная</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hats" role="tab" id="hats-tab"
data-toggle="tab" aria-controls="hats">Шляпы</a>
</li>
<!-- Выпадающее меню -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
role="button" aria-haspopup="true" aria-expanded="false">Обувь</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#dropdown-shoes" role="tab"
id="dropdown-shoes-tab" data-toggle="tab" aria-controls="dropdownShoes">Ботинки</a>
<a class="dropdown-item" href="#dropdown-boots" role="tab"
id="dropdown-boots-tab" data-toggle="tab" aria-controls="dropdownBoots">Сапоги</a>
</div>
</li>
</ul>
<!-- Панель содержимого -->
<div id="clothing-nav-content" class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab">
<p>Добро пожаловать! Пощёлкайте по вкладкам, чтобы увидеть изменение содержимого.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
<p>Шляпа — головной убор. Шляпу можно носить для защиты от погоды,
по церемониальным или религиозным причинам, в целях безопасности
или в качестве модного аксессуара.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown-shoes" aria-labelledby="dropdown-shoes-tab">
<p>Ботинки — предмет обуви, предназначенный для защиты и комфорта
ног человека при выполнении различных действий. Ботинки также
используются в качестве украшения.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown-boots" aria-labelledby="dropdown-boots-tab">
<p>Сапоги — тип обуви и разновидность ботинок. Большинство сапог
защищают ступни и лодыжки, а некоторые закрывают и нижнюю часть
голени. Существуют сапоги высотой до колена или даже бедра.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>