Bootstrap5 Навигация

Если вы хотите создать простую горизонтальную панель навигации, вы можете<ul>добавить к элементу.navкласс, а к каждому<li>добавьте элементу.nav-itemкласс, а к каждой ссылке добавьте.nav-linkкласс:

Пример

<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Отключено</a> </li> </ul>

Попробуйте сами »

Выравнивание навигации

.justify-content-centerкласс выравнивает навигацию по центру,.justify-content-endкласс выравнивает навигацию по правому краю.

Пример

<!--Навигация по центру--> <ul класс="nav justify-content-center"> <!--Навигация по правому краю--> <ul класс="nav justify-content-end"> </div>

Попробуйте сами »

Вертикальная навигация

.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="#">Активный</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Отключено</a> </li> </ul>

Попробуйте сами »

Навигация в виде таблеток

.nav-pillsкласс может задать элементам навигации форму таблеток.

Пример

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Активный</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Отключено</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="#">Активный</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Выпадающее меню</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Ссылка 1</a> <a class="dropdown-item" href="#">Ссылка 2</a> <a class="dropdown-item" href="#">Ссылка 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Отключено</a> </li> </ul>

Попробуйте сами »

Выпадающий список вкладок

Пример

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Активный</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Выпадающее меню</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Ссылка 1</a> <a class="dropdown-item" href="#">Ссылка 2</a> <a class="dropdown-item" href="#">Ссылка 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Отключено</a> </li> </ul>

Попробуйте сами »

Динамические вкладки

Если вы хотите сделать вкладки динамически переключаемыми, вы можете добавить к каждой ссылкеdata-bs-toggle="tab"атрибут..tab-paneкласс, а для содержимого вкладки<div>тег использует.tab-contentкласс.

Если вы хотите эффект постепенного появления, вы можете.tab-paneдобавить после .fadeкласс:

Пример

<!-- Навигационные вкладки --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#home">Главная</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu1">Меню 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu2">Меню 2</a> </li> </ul> <!-- Панели вкладок --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Попробуйте сами »

Динамические пилюли

Для динамических таблеток просто установите атрибут data-bs-toggle в коде примера выше наdata-bs-toggle="pill":

Пример

<!-- Навигационные пилюли --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="pill" href="#home">Главная</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="pill" href="#menu1">Меню 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="pill" href="#menu2">Меню 2</a> </li> </ul> <!-- Панели вкладок --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Попробуйте сами »
Другие расширения