Как создать заголовок навигации в Bootstrap 5 с помощью Navbar?

<

div itemprop=»articleBody»>

Панель меню навигации является частью каждой страницы веб-сайта. Bootstrap использует базовый компонент навигации для создания панели навигации (сокращенно панели навигации). Это помогает создавать различные стили навигации с помощью предварительно скомпилированного компонента по умолчанию, избавляя от необходимости писать код самостоятельно. В этом руководстве мы рассмотрим, как создать панель меню навигации в Bootstrap.

Учебное пособие по Bootstrap 5 Navbar

  1. Основы работы с компонентами Navbar
  2. Части навигатора
  3. Создание стандартной панели навигации Bootstrap
  4. Использование логотипа на панели навигации
  5. Навбар с фоном
  6. Навбар с контейнером
  7. Использование дополнительных элементов в навигационной панели
  8. Отображение внешнего содержимого на панели навигации при переключении
  9. Расположение компонента навигационной панели

1. Основы компонента Bootstrap Navbar

Компонент панели навигации Bootstrap 4 использует flexbox для лучшего выравнивания каждого пункта меню. По умолчанию меню реагирует с использованием компонента сворачивания JavaScript. По сути, это означает, что вы должны включить файлы bootstrap.min.js, jQuery и popper.min.js в свой HTML-шаблон, чтобы работала адаптивная навигационная панель.

Панель навигации по умолчанию является плавной, занимая всю горизонтальную ширину макета. Вы можете обернуть всю панель навигации внутри класса «.container», чтобы ограничить ширину контейнером или любой предварительно определенной шириной.

2. Части компонента Bootstrap 4 Navbar

В отличие от многих других компонентов, навигационная панель сама по себе представляет собой набор элементов, составляющих пакет.

  • Используйте класс «.navbar» с компонентом nav для создания пунктов меню навигации и один из классов «.navbar-expand-sm | md | lg / xl» для сворачивания на требуемой точке останова для создания значка гамбургера.
  • Вы также можете использовать с role = «navigation» вместо
  • Если вы хотите убрать отзывчивость, просто добавьте класс «.navbar-expand» к классу «.navbar».
  • Логотип или бренд вставляется с использованием класса «.navbar-brand».
  • Элемент управления формы поля поиска добавляется с помощью класса «.form-inline».
  • Текст может быть добавлен в навигационную панель с помощью класса «.navbar-text».
  • Ссылка, кнопка, раскрывающиеся списки могут быть добавлены с использованием компонентов по умолчанию.
  • Класс «.navbar-toggler» используется для управления сворачиванием навигационной панели на небольших экранах. Дополнительные классы «.collapse» и «.navbar-collapse» используются для группировки элементов навигационной панели для небольших устройств.

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

3. Стандартная панель навигации Bootstrap

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

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="https://www.webnots.com/bootstrap-navbar-tutorial/index.html">WebNots</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="https://www.webnots.com/bootstrap-navbar-tutorial/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-navbar-tutorial/widgets.html">Widgets</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="https://www.webnots.com/bootstrap-navbar-tutorial/themes.html">Themes</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- End of Navbar -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Панель навигации по умолчанию является элементом полной ширины, вы можете управлять шириной, поместив весь

<

nav> внутри

<

div> с помощью класса «.container». Как уже упоминалось, панель навигации использует стандартный тег HTML5

<

nav> для создания меню навигации. Ниже приводится объяснение классов CSS, используемых в стандартной навигационной панели:

Код выдаст в браузере следующий результат:

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

Обратите внимание, что мы показали приведенный выше код навигационной панели с полным начальным шаблоном для облегчения понимания. Для всех нижеприведенных разделов мы предоставили только блок кода навигационной панели. Вы можете вставить блок кода между начальным и конечным блоком панели навигации приведенного выше кода, чтобы создать полный шаблон.

Использование логотипа на панели навигации

Вышеупомянутая навигационная панель имеет только текстовый логотип. Вы можете легко добавить графический логотип с помощью класса «.navbar-brand». Не забудьте настроить высоту и ширину логотипа с помощью дополнительного встроенного CSS, как показано ниже:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2" aria-controls="navbar2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="https://www.webnots.com/bootstrap-navbar-tutorial/index.html">
<img src="https://www.webnots.com/bootstrap-navbar-tutorial/assets/images/logo.png" width="30" height="30" alt="Logo">
</a>
<a class="navbar-brand" href="https://www.webnots.com/bootstrap-navbar-tutorial/index.html">WebNots</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar2">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://www.webnots.com/bootstrap-navbar-tutorial/widgets.html" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Widgets
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-navbar-tutorial/alerts.html">Alerts</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-navbar-tutorial/badges.html">Badges</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-navbar-tutorial/cards.html">Cards</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

Это даст следующий результат:

Навбар с логотипом

Обратите внимание, что в приведенном выше примере мы использовали пункт раскрывающегося меню и кнопку опасности для поиска. По сути, вы можете добавлять практически любые элементы на панель навигации.

5. Навигационная панель с фоном

Вместо светлого текста и серого фона вы можете использовать светлые или темные цвета фона и настраивать их с помощью служебных классов «.bg- *». Например, ниже приведен пример использования темного цвета фона:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
...
</nav>

Также используйте один из служебных классов фона, чтобы изменить цвет фона на основной, информационный, предупреждающий, успешный, дополнительный, светлый, темный или опасный. Ниже приведен пример фона цвета опасности. Возможно, вам потребуется использовать собственный CSS, чтобы улучшить видимость при использовании разных цветов.

<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
...
</nav>

Измените цвет фона на собственный цвет, используя встроенный стиль, как показано ниже:

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: yellow;">
...
</nav>

Результаты будут показаны ниже:

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

6. Навигационная панель с контейнером

Поместите компонент навигационной панели внутри элемента

с классом «.container», чтобы ограничить ширину, чтобы она соответствовала ширине контейнера.

<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="https://www.webnots.com/bootstrap-navbar-tutorial/#">Navbar Inside Container</a>
</nav>
</div>

Вы также можете разместить контейнер внутри панели навигации, как показано ниже. В этом случае панель навигации будет более или менее похожа на стандартный компонент, так как отступы будут удалены автоматически.

<nav class="navbar navbar-expand-lg navbar-light bg-primary text-white">
<div class="container">
<a class="navbar-brand" href="https://www.webnots.com/bootstrap-navbar-tutorial/#">Container Inside Navbar</a>
</div>
</nav>

Результат в браузере будет выглядеть следующим образом:

Навбар с контейнером

7. Навбар с дополнительными элементами

Вы можете размещать текст, группы ввода, кнопки и любые типы элементов внутри навигационной панели. Ниже приведен пример кода для того же:

А вот как это будет выглядеть:

Навбар с различными элементами

8. Отображение внешнего содержимого при переключении

Навигационную панель не обязательно использовать в качестве меню. Его можно использовать как переключатель «аккордеон» для отображения внешнего контента. Ниже приведен пример кода для создания переключателя со значком гамбургера, который будет отображать текстовое содержимое при нажатии.

<div>
<nav class="navbar navbar-dark bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar6" aria-controls="navbar6" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbar6">
<div class="bg-info p-3">
<h3>Header Inside Collapse</h3>
<p>Content inside the collapse. Both header and content will be shown/hide when the hamburger button is toggled.</p>
</div>
</div>
</div>

При нажатии это будет выглядеть, как показано ниже:

Навигационная панель с внешним содержимым

9. Размещение навигационной панели

Положение панели навигации можно изменить, добавив дополнительные классы CSS, как показано ниже.

<!-- Fixed Top Navbar -->
<nav class="navbar fixed-top navbar-dark bg-success"> 
...
</nav>

<!-- Fixed Bottom Navbar -->
<nav class="navbar fixed-bottom navbar-dark bg-success">
...
</nav>

<!-- Sticky Top Navbar -->
<nav class="navbar sticky-top navbar-dark bg-success">
...
</nav>

Заключение

Вы не можете найти веб-сайт без меню навигации. Это помогает пользователям получить доступ к важным страницам вашего сайта, а пользователи могут выполнять поиск с помощью окна поиска. Итак, мы надеемся, что приведенное выше руководство по навигационной панели Bootstrap 4 было полезно для изучения создания различных типов меню навигации для вашего сайта.


Изучите Bootstrap 5 (Индекс)


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.