1 Ноября 2016

Адаптивная вёрстка быстро и просто.

Как я заметила, большинство веб-студий по прежнему боятся делать сайты адаптивными по умолчанию, а если и предлагают клиенту такую возможность, то за немалые средства и с большим запасом трудодней. В веб-студии Это Web адаптивная вёрстка включена в список услуг по умолчанию. Специалисты нашей компании каждый сайт делают современным, а их дизайн адаптивным.

Итак, сегодня я расскажу, как быстро и без особых трудозатрат привести сайт к адаптивному виду. В данной статье мы будем использовать библиотеку bootstrap-3.

В этой библиотеке уже есть множество шаблонов и готовых решений, которые не составит труда переделать под определённую задачу и использовать. Ниже мы опишем короткий перечень тех, которые используются наиболее часто, а всю подробную информацию вы сможете получить на официальном сайте Bootstrap-3

Перед использованием. Компиляция файла.

Бутстрап даёт использовать свои скрипты в 2 вариантах – это мастер архив, с полным набором всех возможностей и с источником Less файлов и скомпилированный архив, который можно сформировать на этой странице.

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

Далее вы скачиваете себе архив с необходимыми файлами.

После распаковки архива в нужную директорию веб-сайта, в html разметке необходимо подключить стили и скрипты библиотеки, так же не забываем подключить библиотеку jQuery

head шаблона

		
		<link href="css/bootstrap.min.css" rel="stylesheet">      
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>      
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>    
<![endif]-->

Футер шаблона

		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

Некоторые элементы HTML и CSS используют HTML5, по этому его необходимо включить в доктайпе шаблона:

 
		<!DOCTYPE html><html lang="en">    ... </html> 
	

В отличии от предыдущей версии, Bootstrap-3 в первую очередь расcчитан на мобильные устройства, шаблоны мобильных версий хранятся в общей библиотеке, а не отдельными файлами.

Для рендинга и изменения размера касанием в <head> HTML нужно вставить метатег viewport

 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
	

А для того, чобы ограничить приближени и дать возможность пользователям пользователи только скроллить добавим в этот метатег user-scalable=no

 
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
	

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

Основы адаптивной разметки. Контейнер, виды.

Для начала обозначим основные принципы адаптивности.

Весь сайт должен состоять из колонок, а мы в свою очередь можем:

  • Сжимать-разжимать блоки
  • Располагать блоки в определённой последовательности, менять последовательность блоков в отличии от разрешения устройства
  • Прятать и показывать необходимые блоки.

Теперь разберём подробно, каким образом выполняются данные принципы адаптивной вёрстки с применением Bootstrap 3

Для простого центрирование контента создадим див с классом .container на различных контрольных точках ширина контейнера фиксированная и будет меняться автоматически.

Для резиновой (полной) ширины макета вместо класса .container используем .container-fluid.

Далее перечислим все принципиальные особенности вёрстки с помощью бутстрап

  • Для создания горизонтальных групп столбцов нужно использовать классы строк .row
  • .row - должны быть помещены в .container или .container-fluid
  • Потомками строк могут быть только столбцы, а весь текст должен быть в эти столбцы записан
  • Доступных столбцов в сетке предусмотрено 12, столбцы разметки создаются с указанием количества столбцов, которые нужно охватить.
  • Между столбцами существуют отступы padding, а отступ для первого и последнего столбца компенсируется в строках с помощью отрицательного margin на .row

Блоки, колонки

При создании адаптивной вёрстки для каждого типа устройств существует своё название классов колонок, а так же ширины-высота блоков и отступы.

Очень маленькие устройство Телефоны (<768px) Малые устройства Планшеты (≥768px) Средние устройства Настольные (≥992px) Большие устройства Настольные (≥1200px)
Поведение разметки Горизонтальный все время Терпеть неудачу при начатии, горизонтальный выше контрольной точки
Ширина контейнера Нет (автом.) 750px 970px 1170px
Класс префикса .col-xs- .col-sm- .col-md- .col-lg-
# колонок 12
Ширина колонки Авто 60px 78px 95px
Промежуточная ширина 30px(15px) на каждой стороне колонки
Вкладка Да
Отступ Да
Выравнивание колонки Да

В блоках колонок мы указываем, какое количество колонок разметки из 12ти имеющихся будет по каждому типу устройства в одну горизонталь.

Например
 
		<div class="conteiner">    <div class="row">    <div class="col-xs-8"> .col-xs-8 </div>    <div class="col-xs-4"> .col-xs-4 </div> </div> </div> 
	

.col-xs-8
.col-xs-4

Два эти блока будут располагаться в одну строку по горизонтали.

Модернизируем наш код следующим образом:

 
		<div class="conteiner"> <div class="row"> <div class="col-xs-8 col-lg-2 "> col-xs-8 col-lg-2 </div> <div class="col-xs-4 col-lg-10 "> col-xs-4 col-lg-10 </div> </div> </div> 
	

col-xs-8 col-lg-2
col-xs-4 col-lg-10

Теперь строка будет разбита на 8колонок слева и 4 колонки справа до тех пор, пока экран не станет больше или равен 1200 пикселей.

Как только это произойдёт столбцы сгруппируются следующим образом: слева 2 колонки, справа 10 колонок.

По такому принципу и происходит изменение количества столбцов в строке в зависимости от разрешения экрана. Если нам необходимо для различных типов устройств создавать свои группировки столбцов, используем в колонке префиксы данных колонок для этих типов устройств с необходимым количеством столбцов, например

col-xs-1 col-sm-1 col-md-1 col-lg-1

Следующий пример покажет расположение на больших мониторах 1 ряд 4 столбца справа, 8 слева

1 ряд 5 справа и 7 слева на планшетах с разрешением 970px

1 рядПо 6 столбцов на планшетах с разрешением 750px

2 ряда по 12 столбцов на малых устройствах

 
		<div class="conteiner"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4"> col-xs-12 col-sm-6 col-md-5 col-lg-4 </div> <div class=" col-xs-12 col-sm-6 col-md-7 col-lg-8"> col-xs-12 col-sm-6 col-md-7 col-lg-8 </div> </div> </div> 
	

col-xs-12 col-sm-6 col-md-5 col-lg-4
col-xs-12 col-sm-6 col-md-7 col-lg-8


Адаптивные колонки сброса

Иногда бывает, что вёрстка отображается не правильно в некоторых точках, хотя разметка написана верно. Для того, чтобы избежать этой проблемы, необходимо использовать адаптивные колонки сброса. Выглядят они следующим образом:

 
		<div class="clearfix”></div> 
	

Бутстрап поддерживает вложенность колонок. Для этого нужно добавить новый.rowи набор.col-*-*столбцов в существующую.col-*-*:

 
		<div class="row"> <div class="col-md-9">     Level 1: .col-md-9     <div class="row">       <div class="col-md-6"> Level 2: .col-md-6       </div> <div class="col-md-6"> Level 2: .col-md-6       </div> </div> </div> </div> 
	

Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6


Скрытие и отображение блоков

Чтобы отобразить или скрыть элементы, в том числе для программ чтения с экрана, в бутстрап применяются классы .show и .hidden.

Для скрытия и отображения блоков в отличии от устройства, на котором отображается сайт, используются так называемые адаптивные вспомогатели. Это классы с указанием определённого типа разрешения.

Для скрытие столбца используем классы .hidden-xs .hidden-sm .hidden-md .hidden-lg

Отображение столбца соответственно .visible-xs .visible-sm .visible-md .visible-lg

Адаптивное меню

Одной из самых распространённых задач при создании адаптивной вёрстки является сборка меню в иконку при маленьких разрешениях и показ пунктов меню на весь экран при клике. В бутстрапе меню такого вида называется навигационной панелью.
Для создания меню различных типов в бутстрапе используюется класс .Navbar с role="navigation"


 
		<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> <li class="divider"></li> <li><a href="#">Отдельная ссылка</a></li> <li class="divider"></li> <li><a href="#">Еще одна отдельная ссылка</a></li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> 
	


В данном коде кнопка, в которую сворачивается меню описана так:

 
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
	

А само меню заключено в тег

 
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
	

Обратите внимание, что айди, используемый в блоке меню id="bs-example-navbar-collapse-1" указывается в таргете кнопки: data-target="#bs-example-navbar-collapse-1"

Итак, мы рассмотрели основы адаптивной вёрстки с применением с применением Bootstrap 3.

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



Возврат к списку

Свяжитесь с нами

Хотите оставить заказ, задать свои вопросы или узнать цены на разработку сайтов в студии Это Web? Пишите или звоните – вы можете связаться с нами любым удобным способом.

Контакты:

Коммерческий департамент:
Москва, 1-й Щипковский переулок, 4
Департамент производства:
Тула, улица Автомобилистов, 26А

Оставьте заявку:

Специалист по созданию сайта

Ольга Авдошина

Создание и поддержка сайтов
Телефон: 8 (953) 971 09 98
E-mail: olga@eto-web.ru
Skype: avdoshinao
Специалист по seo продвижению сайта

Александр Шеставин

Маркетинг
Телефон: 8 (953) 955 59 69
Skype: shestavin88