Уроки 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>

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


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


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

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

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

Загрузка...

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

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

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

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

Также стоит посмотреть

Изучение технологии Bootstrap (верстка сайта)
16 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Создание блога на Ruby On Rails
8 уроков
Уроки Python Django / Создание сайта
12 уроков
Современная вёрстка адаптивного веб-сайта
Комментарии для сайта Cackle