Навигация

Класс .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>

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты