itProger Видеокурсы Вёрстка адаптивного сайта на Bootstrap 4 #2 - Шапка веб сайта

#2 - Шапка веб сайта

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

Видеоурок

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

Вы можете просмотреть больше примеров реализации шапки на официальном веб сайте по этой ссылке.

Для создания простой адаптивной шапки можно использовать следующий код:

<!-- 
	Вместо navbar-light bg-light можно прописать navbar-dark bg-dark.
	Тогда шапка и текст в ней будет темным.
-->
<nav class="navbar navbar-light bg-light">
	<a class="navbar-brand" href="#">
		<img src="/some-logo.png" class="d-inline-block align-top">
		itProger
	</a>
</nav>

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

В качестве логотипа вы можете использовать все что-угодно. В уроке было использовано фото ниже:

Материалы для курса

bootstrap4-heading.zip

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

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

Bootstrap

HTML5

CSS3