Bootstrap - Навигационные панели: Ваш путь к профессиональной навигации по веб-сайту

Здравствуйте, будущие веб-разработчики! Сегодня мы погрузимся в один из самых важных компонентов современного веб-дизайна: навигационную панель (navbar). Как ваш доброжелательный邻居-учитель информатики, я с радостью проведу вас через奇妙ный мир навигационных панелей Bootstrap. Так возьмите свой любимый напиток, устройтесь поудобнее и отправляйтесь в это кодинговое приключение вместе со мной!

Bootstrap - Navbars

Как это работает

Прежде чем мы начнем создавать наши навигационные панели, давайте поймем, что они такое и как они работают. Навигационная панель,简称 navbar, похожа на карту вашего веб-сайта. Она помогает пользователям ориентироваться в вашей цифровой creatii. В Bootstrap навигационные панели являются адаптивными и по умолчанию сворачиваются, что означает, что ониBeautifully подстраиваются под разные размеры экранов. Неожиданно, правда?

Основная навигационная панель

Давайте начнем с основной навигационной панели. Вот простой пример:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></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" href="#">Контакт</a>
</li>
</ul>
</div>
</nav>

Давайте разберем это:

Мы начинаем с элемента <nav> с классами Bootstrap.
Класс navbar-brand предназначен для названия вашего веб-сайта или логотипа.
navbar-toggler предназначен для мобильного вида, создавая знаменитое меню "бургер".
Внутри navbar-collapse мы имеет наши навигационные элементы вunordered list.

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

Хотите изменить что-то? Давайте попробуем вертикальную навигационную панель:

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Vertical Nav</a>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Главная</a>
<a class="nav-link" href="#">О нас</a>
<a class="nav-link" href="#">Услуги</a>
<a class="nav-link" href="#">Контакт</a>
</nav>
</nav>

Magia здесь в классе flex-column. Онturns нашу горизонтальную навигационную панель в стильную вертикальную. Круто, правда?

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

Для тех, кто любит все выровнено, вот как центрировать элементы вашей навигационной панели:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">Главная</a>
<a class="nav-item nav-link" href="#">О нас</a>
<a class="nav-item nav-link" href="#">Услуги</a>
<a class="nav-item nav-link" href="#">Контакт</a>
</div>
</nav>

Класс mx-auto - наш супергерой выравнивания. Он применяет автоматические отступы с обеих сторон, центрируя наш контент.

Бренд

Ваш бренд - это ваша идентичность. Давайте посмотрим, как сделать его сияющим:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

Этот код добавляет логотип рядом с названием вашего бренда. Классы d-inline-block и align-top обеспечивают красивое выравнивание.

Текст

Иногда вам просто нужно plain text в вашей навигационной панели:

<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Текст навигационной панели с inline элементом
</span>
</nav>

Класс navbar-text стилизует ваш текст, чтобы он соответствовал внешнему виду навигационной панели.

Изображения и текст

Давайте combine изображения и текст для более динамичной навигационной панели:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<span class="navbar-text">
Добро пожаловать на наш веб-сайт!
</span>
</nav>

Это создает навигационную панель с логотипом и欢迎 сообще пострадав.

Навигационный элемент

Компонент nav - это сердце нашей навигационной панели. Давайте посмотрим на более сложный пример:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Главная <span class="sr-only">(текущая)</span></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="#" tabindex="-1" aria-disabled="true">Заблокировано</a>
</li>
</ul>
</div>
</nav>

Этот пример включает активную ссылку, обычные ссылки и заблокированную ссылку. Класс sr-only предназначен для экранных读者的, улучшая доступность.

Навигационная панель без списка

Для более чистого вида вы можете создать навигационную панель без списка:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Главная</a>
<a class="nav-item nav-link" href="#">Функции</a>
<a class="nav-item nav-link" href="#">Тарифы</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Заблокировано</a>
</div>
</nav>

Этот результат достигается без использования тегов <ul> и <li>.

Навигационная панель с выпадающим списком

Готовы подняться на новый уровень? Давайте добавим выпадающий список в нашу навигационную панель:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Главная</a>
<a class="nav-item nav-link" href="#">Ссылка</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадающая ссылка
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">что-то другое здесь</a>
</div>
</div>
</div>
</nav>

Класс dropdown-toggle создает эффект выпадающего списка, а dropdown-menu и dropdown-item стилизуют содержимое выпадающего списка.

Формы

Нужен поисковик? Нет проблем! Вот как добавить форму в вашу навигационную панель:

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>

Класс form-inline удерживает наши элементы формы в одной строке, идеально подходящей для навигационных панелей.

Цветовые схемы

Bootstrap предлагает различные цветовые схемы. Вот темная навигационная панель:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Dark Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Главная</a>
<a class="nav-item nav-link" href="#">Функции</a>
<a class="nav-item nav-link" href="#">Тарифы</a>
</div>
</nav>

Просто измените navbar-light на navbar-dark и bg-light на bg-dark. Просто!

Контейнеры

Для лучшего выравнивания вы можете обернуть содержимое вашей навигационной панели в контейнер:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Contained Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Главная</a>
<a class="nav-item nav-link" href="#">Функции</a>
<a class="nav-item nav-link" href="#">Тарифы</a>
</div>
</div>
</nav>

Класс container центрирует содержимое и предоставляет адаптивную фиксированную ширину.

Размещение

Фиксированное сверху

Хотите, чтобы ваша навигационная панель оставалась вверху? Вот как:

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>

Класс fixed-top делает вашу навигационную панель оставаться вверху страницы при прокрутке.

Адаптивное поведение

Bootstrap навигационные панели адаптивны по умолчанию. Они сворачиваются на smaller экранах и расширяются на больших. Ключ в классе navbar-expand-*:

<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- Navbar content -->
</nav>

Эта навигационная панель будет расширяться на medium-sized экранах и больших.

Переключатель

Навигационный переключатель создает "бургер" меню на мобильных устройствах:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Navbar content -->
</div>
</nav>

Кнопка navbar-toggler управляет видимостью содержимого навигационной панели на smaller экранах.

Внешний контент

Вы можете切换外部内容 также:

<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Свернутый контент</h5>
<span class="text-muted">Переключаемый через навигационный бренд.</span>
</div>
</div>

Это создает переключатель, который управляет содержимым вне навигационной панели.

Offcanvas

Lastly, let's look at an offcanvas navbar:

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Offcanvas content -->
</div>
</div>
</div>
</nav>

This creates a sidebar that slides in from the side of the screen, perfect for mobile navigation.

And there you have it, folks! We've journeyed through the land of Bootstrap navbars, from basic structures to advanced features. Remember, practice makes perfect, so don't be afraid to experiment with these examples. Happy coding, and may your navbars always guide your users true!

Method	Description
`.navbar()`	Initializes the navbar component
`.collapse('toggle')`	Toggles the navbar collapse
`.collapse('show')`	Shows the navbar collapse
`.collapse('hide')`	Hides the navbar collapse
`.offcanvas('toggle')`	Toggles the offcanvas navbar
`.offcanvas('show')`	Shows the offcanvas navbar
`.offcanvas('hide')`	Hides the offcanvas navbar

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - Modal

Следующий учебник:

Bootstrap - Навигация и вкладки