Как я заметила, большинство веб-студий по прежнему боятся делать сайты адаптивными по умолчанию, а если и предлагают клиенту такую возможность, то за немалые средства и с большим запасом трудодней. В веб-студии Это Web адаптивная вёрстка включена в список услуг по умолчанию. Специалисты нашей компании каждый сайт делают современным, а их дизайн адаптивным.
Итак, сегодня я расскажу, как быстро и без особых трудозатрат привести сайт к адаптивному виду. В данной статье мы будем использовать библиотеку 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.container или .container-fluid.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>
Два эти блока будут располагаться в одну строку по горизонтали.
Модернизируем наш код следующим образом:
<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>
Теперь строка будет разбита на 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>
Иногда бывает, что вёрстка отображается не правильно в некоторых точках, хотя разметка написана верно. Для того, чтобы избежать этой проблемы, необходимо использовать адаптивные колонки сброса. Выглядят они следующим образом:
<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>
Чтобы отобразить или скрыть элементы, в том числе для программ чтения с экрана, в бутстрап применяются классы .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.
Как можно увидеть, в нашем портфолио есть множество работ, которые подтверждают, что использование этого решения при создании адаптивных сайтов – простое, надежное и красивое.