2020-05-12
639ПРАКТИЧЕСКАЯ РАБОТА № 3
Верстка сайта с применением фреймворка Bootstrap
Цель: Изучить основные возможности технологии bootstrap для создания адаптивных web-сайтов.
Инструментарий:
1) Любой редактор программного кода, например, notepad++
2) Любой современный браузер
ЗАДАНИЯ
Переверстать сайт, выполненный вручную в первых двух практических работах с применением фреймворка bootstrap
Переверстать собственный web-сайт с применением того же подхода.
ВЫПОЛНЕНИЕ ЗАДАНИЯ 1.
Шаг 1. Для использования возможностей bootstrap можно 1). Скачать фреймворк с официального сайта и хранить его вместе с проектом локально. В этом случае вы можете вести разработку в режиме off-line. 2) Подключить фреймворк on-line. Мы воспользуемся первым способом.
По ссылке https://getbootstrap.com/docs/4.4/getting-started/download/ скачаем архив фреймвока (на момент написания пособия была доступна версия 4.4.1).
Создать новую папку под именем, например, travel, и распаковать в нее скачанный архив.
В той же папке создать файл index.html, в который скопировать базовый документ Starter template, размещенный на странице get started.
|
|
|
Открыть этот файл в используемом Вами редакторе кода и подключить bootstrap локально:
| <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href=" bootstrap-4.4.1-dist/css/bootstrap.min.css" > <title>Hello, world!</title> </head> | <!--Здесь меняем удаленное подключение на локальное--> |
После просмотра полученного документа в браузере должно получиться следующее:
Нам придется также переопределять некоторые стандартные стили bootstrap, поэтому создадим еще один собственный файл стилей style.css в папке css, которая создалась при распаковке bootstrap и подключим его в файле index.html:
| <!-- Bootstrap CSS --> <link rel="stylesheet" href=" bootstrap-4.4.1-dist/css/bootstrap.min.css" > ….<!—Собственные стили--!> <link rel="stylesheet" href=" bootstrap-4.4.1-dist/css/style.css" > … | <!--Здесь добавляем ссылку на собственные стили--> |
Если теперь в этом файле переопределить основное начертание шрифта, например, так:
body{
font-family:Verdana;
}
вы должны увидеть соответствующее изменение надписи Hello world!
Шаг 2. Мы будем придерживаться стиля сайта, который был создан в первых двух работах, поэтому первой областью должна стать область заголовка. Используем для него сетку bootstrap, которая позволяет использовать уже готовые стили для строк и столбцов.
Предварительно подготовьте в папке проекта папку img c картинками из предыдущего варианта сайта
ВМЕСТО блока, который выводит Hello Word! поместим следующий код:
| <body class="body-top"> <header class="container"> <div class="row"> <div class="col-3"> <img id="logo" src="img/logo.jpg"> </div> <div class="col-9"> <h1>Путешествуйте с нами!</h1> </div> </div> </header> … | <!—Используем стиль body-top по умолчанию для всего документа--> <!--Создаем блок для области заголовка--> <!--Создаем новую горизонтальную область (строку) --> <!--Внутри горизонтальной области определяем первую колонку шириной 3/12--> <!--Внутри выводим логотип--> <!--Завершаем первый столбец--> <!--Внутри горизонтальной области определяем вторую колонку, шириной 9/12--> <!--Внутри выводим название--> <!--Завершаем второй столбец--> <!--Завершаем строку--> <!--Завершаем описание области заголовка--> |
В СВОЕМ файле style.css переопределим стили:
|
|
|
| .body-top { width:80%; border: none; margin: auto; font-family:Verdana; font-style: normal; font-size: normal; font-weight:bold; text-align:center; } header { padding: 1em; color: white; background-color: #007196; vertical-align:center; } #logo { max-width:180px; max-height:140px; } .col-9 { display: flex; } h1{ margin:auto; } @media screen and (max-width: 768px) { #logo { max-width:100px; max-height:70px; } h1{ font-size:14px; } } | /*Оформление содержимого всей страницы по умолчанию, скопировано с предыдущей версии сайта*/ /*Оформление содержимого всего блока заголовка */ /*Размер логотипа для средних и больших экранов */ /* «Плавающее» в зависимости от изменения экрана название */ /*Заголовок в плавающем окне по центру*/ /*МЕДИА-ЗАПРОС позволяет сделать размер логотипа и названия меньшими при изменении размера окна до размера мобильного устройства*/ |
Результат будет таким:
Обязательно попробуйте уменьшить размер экрана и убедитесь в том, что область заголовка адаптивна, то есть медиа-запрос работает.
Шаг 3. Создадим меню навигации. Это один из готовых блоков bootstrap, код которого нужно скопировать на сайте, вставить в нужное место страницы и отредактировать стили по умолчанию.
Скопируем на странице https://getbootstrap.com/docs/4.4/components/navs/ один из вариантов горизонтального меню, например, Working with flex utilities, и вставим этот код в обертку класса “menu” после области header.
Далее необходимо убрать (или добавить) аналогичные гиперссылки для других пунктов меню и отредактировать их с учетом Ваших страниц и их URL.
| <div id="menu"> <nav class="nav nav-pills flex-column flex-sm-row"> <a class="flex-sm-fill text-sm-center nav-link" href="index.html">Главная</a> <a class="flex-sm-fill text-sm-center nav-link" href="tours.html">Наши туры</a> <a class="flex-sm-fill text-sm-center nav-link" href="contacts.html">О нас</a> </nav> </div> | <!--Обертка для меню--> <!--Начало flex-меню--> <!--Ссылка на главную страницу--> <!--Ссылка на страницу с информацией о турах--> <!--Ссылка на страницу с контактами--> |
Далее переопределим некоторые стили этого меню так, чтобы они больше походили на меню из предыдущего проекта:
| #menu{ background-color:#66CDAA; } a { color:white; border:solid white; box-shadow: 20px 0 20px -20px #000 inset, -20px 0 20px -20px #000 inset;} | /*Фон всего меню*/ /*Цвет и рамка каждого пункта меню*/ |
Получим:
Но главное, что без нашего вмешательства, за счет применения стилей и технологий bootstrap это меню полностью адаптивно. При уменьшении экрана получим:
Шаг 4. Пользуясь сеткой, сверстаем контент главной страницы, который должен состоять из трех колонок, каждая из которых содержит картинку и ссылку на подробное описание. Каждая колонка занимает треть ширины экрана, а, значит, 12/3=4 col. Этот класс колонок и будем применять в строке (row), которая содержит основной контент страницы.
| <main class="flex"> <div class="row"> <div class="col"> Наши акции </div> </div> <div class="row"> <div class="col"> <div class="country"> <img src="img/turkey.jpg"> <p> <a class="actia" href="#" > Подробнее об акции</a> </p> </div> </div> <div class="col"> <div class="country"> <img src="img/egipt.jpg"> <p> <a class="actia" href="#" > Подробнее об акции</a> </p> </div> </div> <div class="col"> <div class="country"> <img src="img/thai.jpg" > <p> <a class="actia" href="#" > Подробнее об акции</a> </p> </div> </div> </div> </main> | <!—Начало всего блока с содержимым --> <!—Начало первой строки в этом блоке --> <!—Начало единственной колонки в первой строке --> <!—Начало второй строки в этом блоке --> <!—Начало первой колонки во второй строке (т.к. они одинаковой ширины, можно указывать просто класс “col”) --> <!—Создаем еще один блок, который объединит картинку и ссылку в этой колонке--> <!—Выводим картинку--> <!—С новой строки выводим ссылкуà <!—Закрываем блок с картинкой и ссылкой--> <!—Закрываем колонкуà <!—Аналогично описываем еще две колонки в пределах второй строки à |
|
|
|
Незначительные переопределения стилей:
| .country{ border: solid #007196; } .country img { width:250px; height:170px; padding:5px; } .country a{ background-color:#66CDAA; box-shadow: 20px 0 20px -20px #000 inset, -20px 0 20px -20px #000 inset; color:white; } | /* Для класса country, который объединяет картинку и ссылку:*/ /* цвет фона*/ /* Для картинок, но только входящих в блок класса country*/ /* Для ссылок, но только входящих в блок класса country*/ |
Получим следующий результат для полного экрана:
И для экрана мобильного устройства:
Шаг 5. Осталось только добавить footer, чтобы страница получила законченный вид.
| <footer class="footer" > <div class="row"> <div class="col"> Это сайт, предназначенный для обучения </div> </div> </footer> | /*Страница занимает 100% экрана по высоте*/ |
И стили, которые учитывают, что footer должен быть «привязан» к нижней части экрана:
|
|
|
| html { height: 100%; } body { min-height:100%; position:relative; padding-bottom: 70px; } .footer { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; color:white; background-color: #007196; } | /*Страница занимает 100% экрана по высоте*/ /*Тело документа имеет относительное позиционирование, но отступ для тела документа снизу больше или равен высоты футера*/ /*Футер документа имеет абсолютное позиционирование, высоту 50px*/ |
Результат:
Очевидно, что теперь, для создания других страниц этого сайта, можно использовать страницу index.html в качестве шаблона, в котором нужно изменять только содержимое блока main.
Для создания остальных страниц сайта рекомендуем использовать готовые компоненты bootstrap: формы, карточки, списки, кнопки и т.п., которые можно получить на странице https://getbootstrap.com/docs/4.4/components/
