Создание HTML структуры шапки
Создадим шапку сайта с помощью тега <nav> и классов Bootstrap:
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container">
<!-- Здесь будет логотип и меню -->
</div>
</nav>- navbar: базовый класс для навигационной панели.
- navbar-expand-md: адаптивная шапка, занимающая всю ширину экрана на средних и больших устройствах.
- navbar-light: светлые тона шапки.
- bg-light: светлый фон.
- sticky-top: шапка прикреплена к верху страницы при прокрутке.
- container: блок, ограничивающий ширину содержимого шапки.
Добавление логотипа
Внутри блока <div class=»container»> добавим логотип, используя ссылку <a>:
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="Логотип">
</a>- navbar-brand: класс Bootstrap для стилизации логотипа.
- img: тег для вставки изображения (файл logo.png в папке img).
Для корректного отображения логотипа можно добавить стили CSS:
.navbar-brand img {
width: 150px;
}Создание адаптивного меню
Для создания адаптивного меню используем:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<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" href="#">Сервис</a></li>
<li class="nav-item"><a class="nav-link" href="#">Команда</a></li>
</ul>
</div>- navbar-toggler: кнопка для отображения/скрытия меню на маленьких экранах.
- navbar-toggler-icon: класс Bootstrap для иконки кнопки.
- collapse: класс Bootstrap для скрытия/отображения меню.
- navbar-collapse: класс Bootstrap для контейнера меню.
- navbar-nav: класс Bootstrap для списка элементов меню.
- nav-item: класс Bootstrap для каждого элемента меню.
- nav-link: класс Bootstrap для ссылок в меню.
- ml-auto: класс Bootstrap для выравнивания меню по правому краю.
Стилизация меню
Для улучшения внешнего вида меню добавим стили CSS:
.nav-item {
margin-right: 20px;
}
.nav-link {
font-size: 1.1em !important;
}- margin-right: расстояние между элементами меню.
- font-size: размер шрифта ссылок в меню.
- !important: переопределяет стили Bootstrap.
Создана полностью функциональная и адаптивная шапка сайта с помощью Bootstrap 4. Шапка прикреплена к верху страницы и корректно отображается на всех устройствах.