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

Скачать материалы к учебному курсу:
Скачать 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>

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



</head>
<body>
<h1>Hello, world!</h1>

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

<script src="js/bootstrap.min.js"></script>
</body>
</html>

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

Рисунок 4

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

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

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

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

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

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>

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

    
    
    
    <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>

<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> 
</div>

<div class="row">
  <div class="col-md-2">.col-md-2</div> 
  <div class="col-md-10">.col-md-10</div> 
</div>

<div class="row">
  <div class="col-md-4">.col-md-4</div> 
  <div class="col-md-8">.col-md-8</div> 
</div>

<div class="row">
  <div class="col-md-6">.col-md-6</div> 
  <div class="col-md-6">.col-md-6</div> 
</div>

<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> 
</div>

<div class="row">
  <div class="col-md-9">.col-md-9</div> 
  <div class="col-md-3">.col-md-3</div> 
</div>

</div>

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <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. Внимательно читайте комментарии к строкам. Проанализируйте поведение макета при разной ширине экрана.

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 и проверьте работоспособность медиазапросов.