Всем доброго времени суток!
Начальные приготовления
Сегодня опишу как сделать header на html, css, и фреймворке Bootstrap.
Я создаю сайты с помощью Open Server`a и редактора кода Sublime Text3. Вы можете использовать любой удобный для вас локальный веб-сервер и редактор кода.
- Для начала зайдем на локальный сервер и создадим папку с нашим сайтом. Назовем ее, к примеру, zen.test
- Внутри создадим файл index.html. Данный файл - главная страница сайта.
- Далее создадим папку css, где создадим файл main.css - файл стилей.
- Создадим папку imgs, где будут хранится наши картинки.
- И последнее создадим папку js, где будут хранится файлы javascript.
- В скаченом архиве будут лежать 2 папки css и js. Из папки css нам понадобится файл bootstrap.css, а из папки js файлы bootstrap.js и bootstrap.min.js. Их мы перенесем в наши папки css и js соответственно.
Теперь мы готовы писать код!
Написание разметки
Откроем наш файл index.html и пропишем в нем начальную разметку
Здесь мы подключаем stylesheets, которые находятся в папке css - bootstrap.css и main.css. Они подключаются в теге head. В нем хранятся элементы, помогающие браузеру в работе с данными.
В теге body мы подключаем javascript файл. Javascript файл подключаются в конце, то есть находятся в самом низу тега body. В теге body содержится контент нашей страницы.
Что будет у нас в header?
- Наше лого
- Меню
- Номер телефона
- Иконки соц сетей. Как и откуда их брать не скачивая их иконки расскажу далее.
Напишем стандартное boostrap меню.
Из этой разметки у нас получится
Немного комментариев по данной разметке
- Данное меню получается не во весь эран из-за ипользования класса container. Если вы хотите меню во весь экран браузера то используйте класс container-fluid.
- Boostrap использует font awsome, который не идет с ним в комплете. Font Awsome - это иконочный шрифт. Он также понадобится нам для иконок социальных сетей. Чтобы получить его Вам надо перейти на сайт Font Awsome, ввести свой e-mail на который придет письмо с подтверждением. После подтверждения Вам придет письмо с примерно такой ссылко внутри него <script src="https://kit.fontawesome.com/d2c0d130eb.js" crossorigin="anonymous"></script>
- Еe мы подключим в head. Вот таким способом
Теперь мы сможем увидеть иконку меню еслиуменьшить окно браузера до размера мобильного устройства
Нет не сможем... А знаете почему? Потому что она белая как и наш фон.
Добавим ей стиль. Откроем на файл стилей main.css и пропишем там
Теперь нашу кнопку видно НО! она не работает! А почему?
Потому что для работы bootstrap нужен jQuery и сейчас мы его подключим!На момент выхода статьи актуальная версия 3.5.1. Вы можете скопировать <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> и вставить в конец тега body, где мы подключали boostrap.js или перейти на сайт jQuery и взять актуальную версию.
И теперь у нас все работает!
Теперь добавим номер телефона и иконки социальных сетей
И вот что мы имеем
Уже что-то, но все таки иконка меню должна быть справа. Пропишем немного стиля.
К нашему номеру мы задали класс phone и отодвинул его от иконок. К иконкам добавили класс socials изменили размер и перекрасили.
Если Вас устаивает где находится кнопка меню, можете заканчивать читать статью и перехоидть в конец статьи за архивом с кодом, если нет то сейчас мы будем работать с сеткой boostrap. Я не буду долго объяснять что это. В двух словах - эта сетка рязделяет рабочую область сайта на 12 секторов в которых размещаются элементы. Подробнее вы можете прочитать тут.
В нашем меню 5 элементов с которыми мы будем работать
- Лого
- Меню
- Кнопка меню
- Телефон
- Значки социальных сетей
Для каждого разрешения экрана нам нужно правильно распределить место в сетке для этих элементов.
Как нам это сделать?
- К нашему меню мы добавляем класс row, говоря браузеру что тут будет использоваться сетка.
- Заключаем наши элементы в тек div
- Добавляем классы col-x col-sm-x col-md-x col-lg-x col-xl-x , где x колчиство секторов выделенные под элемент.
И у нас получается
Пишите если Вам интересна эта тема. Пишите о чем хотели бы узнать.
Вот ссылка на файлы Я.Диск