УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Уроки адаптивной верстки

Скачать материалы к учебному курсу:
Скачать Notepad++ Portable
Скачайте фреймворк Bootstrap 3 (361 Кб)




Урок 1. Сетка Bootstrap

1. Подключение Bootstrap

1. Скачайте фреймворк Bootstrap 3 здесь.

Примечание: последнюю версию Bootstrap можно скачать на официальном сайте http://getbootstrap.com

2. Создайте папку, например, Сайт на Bootstrap, внутри нее создайте папку bootstrap и перенесите в нее файлы из архива, должно появиться три папки css , js , fonts:

Рисунок 1

3. Стандартная файловая структура Bootstrap выглядит следующим образом:

Рисунок 2

В папке CSS находится 6 файлов  нужен только один bootstrap.css — этот css-файл содержит необходимые готовые стили. Остальные файлы можно удалить

В папке fonts хранятся файлы шрифтов. Здесь ничего не удаляем.

В папке js хранятся 2 файла, это bootstrap.js и bootstrap.min.js.
Это два одинаковых файла: bootstrap.js – полная версия, а bootstrap.min.js – сжатая. Последний можно удалить.

Таким образом, в наших папках остаются следующие файлы:

Рисунок 3

4. В папке Сайт на Bootstrap создайте файл index.html с кодировкой utf-8.

5. В этот файл вставьте стандартный код Bootstrap (https://getbootstrap.com/docs/3.3/getting-started/ раздел Basic template):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 6. Просмотрите страницу в браузере. Результат на рисунке ниже.

Рисунок 4

7. В этом коде нужно пропишите правильный путь к файлам bootstrap.js и bootstrap.css.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.js"></script>
  </body>
</html>

 Мы подключили:

таблицу стилей bootstrap.css:

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

файл со скриптами bootstrap.js:

<script src="bootstrap/js/bootstrap.js"></script>

библиотеку jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

8. Сохраните файл и просмотрите в браузере. Результат на рисунке ниже

Рисунок 5

9. Содержимое сайта в Bootstrap располагается в контейнере с классом container. Пропишите контейнер и задайте ему границы:

<div class="container" style="border:1px solid #000;" >
  <h1>Hello, world!</h1>
</div>

 10. Проверьте поведение макета в браузере. Контейнер всегда расположен по центру.

Рисунок 6

2. Сетка в Bootstrap

Сетка Bootstrap состоит из колонок и строк.

Строк может быть сколько угодно, каждой строке надо присвоить класс row.

<div class="container">
   <h1>Hello, world!</h1>
   <div class="row">
    ...
   </div>
   <div class="row">
    ...
   </div>
</div>

Сетка Bootstrap состоит из 12 колонок, все колонки имеют одинаковую ширину.

Колонки можно совмещать по несколько штук. Чтоб совместить колонки, нужно внутри row указать класс префикса, соответствующий устройству. Классы префиксов для различных устройств с различной шириной экрана приведены в таблице ниже.

Таблица разметки Bootstrap для различных групп устройств

Очень маленькие устройство
Телефоны (<768px)

Малые устройства
Планшеты (≥768px)

Средние устройства
Настольные (≥992px)

Большие устройства
Настольные (≥1200px)

Ширина контейнера

(container)

Нет (автом.)

750px

970px

1170px

Класс префикса

.col-xs-

.col-sm-

.col-md-

.col-lg-

Колонок

12

Ширина колонки

Авто

60px

78px

95px

Давайте посмотрим, как это будет оформляться в коде.

Для начала рассмотрим средние устройства, ширина экрана которых согласно таблице равна 992px и выше.

 Чтоб совместить колонки, нужно внутри row указать класс префикса, в данном случае col-md-*, где * – число колонок, которые сливаем.

Например

<div class="row">
<div class="col-md-6">содержимое в блоке</div>
<div class="col-md-6">содержимое в блоке</div>
</div>

Общее число колонок в строке всегда должно быть 12. Ниже представлена один из возможных вариантов сетки Bootstrap.

Рисунок 7

Представим эту сетку в виде кода.

1. Реализуйте этот код и сохраните в файле index_1.html. Внимательно читайте комментарии. Обратите внимание, что сумма колонок в каждой строке всегда равна 12. Проанализируйте поведение макета при разной ширине экрана.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
 
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12
    {
    border:1px solid #ccc;    
    height:60px;
    }
    </style>
  </head>
  <body>
<div class="container">
 
        <h1>Hello, world!</h1>
<!-- 1 строка  -->
<div class="row">
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка-->
  <div class="col-md-1">.col-md-1</div> <!--Одна колонка. Сумма всех колонок равна 12-->
</div>
<!-- 2 строка  -->
<div class="row">
  <div class="col-md-2">.col-md-2</div> <!--Две колонки слиты в одну-->
  <div class="col-md-10">.col-md-10</div> <!--Десять колонок слиты в одну. Сумма колонок 2+10=12-->
</div>
<!-- 3 строка  -->
<div class="row">
  <div class="col-md-4">.col-md-4</div> <!--Четыре колонки слиты в одну-->
  <div class="col-md-8">.col-md-8</div> <!--Восемь колонок слиты в одну. Сумма колонок 4+8=12-->
</div>
<!-- 4 строка  -->
<div class="row">
  <div class="col-md-6">.col-md-6</div> <!--Шесть колонок слиты в одну-->
  <div class="col-md-6">.col-md-6</div> <!--Шесть колонок слиты в одну. Сумма колонок 6+6=12-->
</div>
<!-- 5 строка  -->
<div class="row">
  <div class="col-md-4">.col-md-4</div> <!--Четыре колонки слиты в одну-->
  <div class="col-md-4">.col-md-4</div> <!--Четыре колонки слиты в одну-->
  <div class="col-md-4">.col-md-4</div> <!--Четыре колонки слиты в одну. Сумма колонок 4+4+4=12-->
</div>
<!-- 6 строка  -->
<div class="row">
  <div class="col-md-9">.col-md-9</div> <!--Девять колонок слиты в одну-->
  <div class="col-md-3">.col-md-3</div> <!--Три колонки слиты в одну. Сумма колонок 9+3=12-->
</div>
 
</div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.js"></script>
  </body>
</html>

Результат в браузере представлен на рисунке ниже

Рисунок 8

Рассмотрим, как работают различные классы (префиксы)

У нас есть код:

<div class="row">
  <div class=" col-xs-12 col-sm-9 col-md-2 col-lg-12">Левая колонка</div>
  <div class=" col-xs-12 col-sm-3 col-md-10 col-lg-12">Правая колонка </div>
</div>

В итоге:
- на больших устройствах (≥1200px) на экране будут две строки на всю ширину - действует класс col-lg-12:

Рисунок 9

- на средних устройствах (≥992px < 1200px) на экране будет две колонки  - действуют классы col-md-2 и col-md-10:

Рисунок 10

- на малых устройствах (≥768px <992px) на экране будет две колонки  – действуют классы col-sm-9 и col-sm-3:

Рисунок 11

- на очень маленьких устройствах (<768px) на экране будет две строки на всю ширину (колонки расположены друг под другом) - действует класс col-xs-12:

Рисунок 12

 

Рассмотрим пример разметки простого сайта на различных устройствах.

На устройствах от 768px и выше макет сайта будет выглядеть так (срабатывают классы col-sm-* col-md-* col-lg-*)

Рисунок 13

На устройствах меньше 768px срабатывает класс col-xs-*, макет будет выглядеть так

Рисунок 14

2. Реализуйте код, сохраните в файле index_2.html. Внимательно читайте комментарии к строкам. Проанализируйте поведение макета при разной ширине экрана. 

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>

<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12
{
border:1px solid #ccc;
height:60px;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<!-- 1 строка Шапка сайта -
Двенадцать колонок слиты в одну на всех устройствах-->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">Шапка сайта</div>
</div>
<!-- 2 строка Левое меню и контент - 
На устройствах меньше 768px - 12 колонок в одну строку, срабатывает стиль col-xs-12
На устройствах от 768px и выше - два столбца, по 3 и 9 слитных колонок соответственно,
срабатывают стили col-sm-3 col-md-3 col-lg-3
-->
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">Левое меню</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">Контент</div>
</div>
<!-- 3 строка Подвал сайта - на всех устройствах поделен на две части по шесть колонок-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">Левая часть подвала</div> <!--Шесть колонок слиты в одну-->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">Правая часть подвала</div> <!--Шесть колонок слиты в одну-->
</div>

</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html> 

3. Для наглядности зададим изменение цвета фона контейнера при ширинах экрана, определенных в Bootstrap.

Очень маленькие устройство
Телефоны (<768px)

Малые устройства
Планшеты (≥768px)

Средние устройства
Настольные (≥992px)

Большие устройства
Настольные (≥1200px)

Цвет фона контейнера

#f2affa

#74cee8

#cee874

#f4d798

Для этого будем использовать медиазапросы.

4. Создайте дополнительный файл со стилями style.css и впишите медиазапросы

/*При ширине экрана 1200px и выше */
@media (min-width: 1200px){
.container {background: #f4d798;}
} 

/*При ширине экрана от 992px до 1199px*/
@media (min-width: 992px) and (max-width:1199px){
.container {background: #cee874;}
} 

/*При ширине экрана от 768px до 991px*/
@media (min-width: 768px) and (max-width:991px){
.container {background: #74cee8;}
}

/*При ширине экрана 767px и меньше */
@media (max-width: 767px){
.container {background: #f2affa;}
}

5. Подключите файл стилей style.css к index_2.html и проверьте работоспособность медиазапросов.

Контрольное задание

Создать адаптивный макет сайта на bootstrap.  Ниже приведены скриншоты, как должен выглядеть макет при различных разрешениях экрана. 

При ширине экрана 1200px и выше 

Рисунок 15 

При ширине экрана от 992px до 1199px

Рисунок 16 

При ширине экрана от 768px до 991px

Рисунок 17 

При ширине экрана 767px и меньше

Рисунок 18

Контрольное задание 2

Создать адаптивный макет сайта на bootstrap.  Ниже приведены скриншоты, как должен выглядеть макет при различных разрешениях экрана. 

При ширине экрана 1200px и выше 

Адаптивная верстка сайтов. Сетка Bootstrap

При ширине экрана от 992px до 1199px

Адаптивная верстка сайтов. Сетка Bootstrap

При ширине экрана от 768px до 991px

Адаптивная верстка сайтов. Сетка Bootstrap

При ширине экрана 767px и меньше

Адаптивная верстка сайтов. Сетка Bootstrap