Bootstrap5 Навигационная панель

Панель навигации обычно размещается в верхней части страницы.

Мы можем использовать класс.navbar, чтобы создать стандартную панель навигации, а затем:.navbar-expand-xxl|xl|lg|md|smкласс, чтобы создать адаптивную панель навигации (горизонтальную на больших экранах, вертикально расположенную на маленьких экранах).

Пункты на панели навигации могут использовать элемент<ul>и добавитьclass="navbar-nav"класс.<li>Затем добавьте.nav-itemна элемент.<a>Используйте на элементе.nav-linkкласс:

Пример

<!--На маленьких экранах горизонтальная панель навигации становится вертикальной.--> <nav класс="navbar navbar-expand-sm bg-light"> <!-- Ссылки --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </nav>

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

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

Удалив класс.navbar-expand-xxl|xl|lg|md|sm, вы можете создать вертикальную панель навигации:

Пример

<!--Вертикальная навигационная панель--> <nav class="navbar bg-light"> <!-- Ссылки --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 3</a> </li> </ul> </nav>

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

Центрированная навигационная панель

Добавив класс.justify-content-center, вы можете создать панель навигации с выравниванием по центру:

Пример

<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>

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

Навигационная панель с разными цветами

Вы можете использовать следующие классы для создания навигационных панелей с разными цветами:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkи.bg-light).

Совет:Для темных фонов.navbar-darkнужно задать светлый цвет текста; для светлых фонов.navbar-lightнужно задать темный цвет текста.

Пример

<!--Серый фон с чёрным текстом--> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <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> </nav> <!--Чёрный фон с белым текстом--> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <!--Синий фон с белым текстом--> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

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

Активные и отключённые состояния: Вы можете<a>добавить к элементу.activeкласс, чтобы выделить выбранный пункт..disabledкласс используется, чтобы сделать ссылку некликабельной.

Бренд/Логотип

.navbar-brandкласс используется для выделения бренда/логотипа:

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Логотип</a> ... </nav>

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

Вы можете использовать.navbar-brandкласс, чтобы сделать изображение адаптивным в navbar.

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Логотип" style="width:40px;"> </a> ... </nav>

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

Сворачиваемая навигационная панель

Обычно на небольших экранах мы сворачиваем navbar и отображаем параметры навигации при нажатии.

Чтобы создать сворачиваемый navbar, можно добавить к кнопкеclass="navbar-toggler", data-bs-toggle="collapse" и data-target="#thetarget"класс. Затем наclass="collapse navbar-collapse"div с классом, оберните содержимое навигации (ссылки). id на элементе div соответствуетdata-targetid, указанному на кнопке:

Пример

<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Бренд --> <a class="navbar-brand" href="#">Навигационная панель</a> <!-- Кнопка переключателя/сворачивания --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Ссылки панели навигации --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-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> </ul> </div> </nav>

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

Панель навигации с выпадающим меню

Вы можете установить выпадающее меню на панели навигации:

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Бренд --> <a class="navbar-brand" href="#">Логотип</a> <!-- Ссылки --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> <!-- Выпадающее меню --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown"> Ссылка выпадающего меню </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> </ul> </nav>

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

Формы и кнопки в navbar

Формы navbar<form>элемент используетclass="form-inline"класс для размещения полей ввода и кнопок:

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <input class="form-control" type="text" placeholder="Поиск"> <button class="btn btn-success" type="submit">Поиск</button> </form> </nav>

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

Вы также можете использовать другие классы ввода, например.input-group-addonкласс используется для добавления небольшой метки перед полем ввода.

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> </form> </nav>

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

Текст навбара

Используйте.navbar-textКласс для установки нессылочного текста на navbar обеспечивает горизонтальное выравнивание с тем же цветом и отступами.

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Ссылки --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Ссылка 2</a> </li> </ul> <!-- Текст панели навигации--> <span class="navbar-text"> Текст панели навигации </span> </nav>

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

Фиксированная панель навигации

Панель навигации можно закрепить сверху или снизу.

Мы используем.fixed-topкласс, чтобы закрепить панель навигации:

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>

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

.fixed-bottomЭтот класс используется, чтобы закрепить панель навигации снизу:

Пример

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>

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

Пример навигационной панели

Пример


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