Начнем с общих слов, что бутстрап сейчас — самая популярная и распрастраненная платформа для создания адаптивных сайтов.

Сегодня практически нет ни одной платной темы на вордпресс без бутстрапа. Верстать на бутстрапе — хороший тон, так как позволяет разработчикам со всего мира «подхватывать» чужие проекты для доработки или ведения техподдержки без необходимости потрошить и переписывать половину листов стилей. Бутстрап — это шаблонизация макетов, подходов и методик.

Основное преимущество бутстрапа в том, что можно моментально менять верстку (количество колонок, момент перепада блоков на следующий уровень и т.п.) БЕЗ необходимости открывать листы стилей. Не нужно переписывать ширины блоков для разных размеров экрана — бутстрап сделает все за вас. Более того, используя бутстрап НЕ ЗАДАВАЙТЕ ширины никаким блокам! Это очень сильно мешает адаптивности и респонсивности макета. Также нельзя ставить горизонтальные маргины, макет «сыпется».

В последнем уроке «Ура! Мы собрали свой первый резиновый макет» рассказано о свойстве box-sizing: border-box. В уроке вы могли понять, что свойство box-sizing определяет интерпретацию браузером обводки — считать ли бордер частью дива? Если див равен 300 пикселям в ширину, а рамка — 10 пикселям, то итоговая ширина дива будет 280 пикселей (300 — 2*10)? Или 300? В бутстрапе все дивы соответствуют правилу box-sizing: border-box. Это значит, что вы можете задавать любые рамки дивам без боязни, что они перестанут «влезать» в отпущенный им ряд и упадут на следующую строку.

В чем инновационность бутстрапа

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

Долгое время веб-верстальщики пользовались таблицами, так как они как раз и позволяют дробить все на строки и колонки внутри них. В счастливые времена, когда смартфонов не существовало, а мониторы делились чаще всего на 4 вида диагоналей, мы выбирали самую популярную (17 дюймов) или наименьшую (13 дюймов) диагональ и верстали жесткий макет, максимально тяготеющий к печатным листовкам или рекламным буклетам.

Но на нынешний момент существует около 100 вьюпортов (размеров экранов), и это число растет.

Как заверстать одну и ту же страницу для всех возможных вьюпортов?

Первый и очевидный шаг — сделать таблицы «резиновыми» — дать колонкам ширины в процентах, а не в пикселях. Этим мы и занимались в предыдущем уроке.

До появления смартфонов этот способ нас спасал. Но на телефонах, как можно представить — контент не может влезть в ширину экрана таким же образом, как в десктоп. Если у вас в ряду 6 колонок с текстом, то на телефоне, даже если ширина колонки будет равна всего одному слову, таблица все равно не влезет в ширину экрана.

Мы стали верстать дивами, так как, в отличие от таблицы с жестким делением на колонки внутри строк, дивы могут «падать» вниз, на «следующую строку».

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

Бутстрап наконец-то дал нам возможность без усилий верстать на табличный лад, НО ДИВАМИ, с использованием их преимущества «падать» на следующие строки. Его структура очень напоминает верстальные сетки печатных изданий, только если бы эти сетки были жидкими, и кубики «перетекали» на новое место при изменении ширины общего листа.

Вы можете легко понять этот принцип, исследовав любую современную вордпресс тему, например: http://demo.elitelayers.com/highfill/.

Откройте сайт в Google Chrome, нажмите в любом месте правой кнопкой мыши, выберите Inspect.

Настройте окно так, чтобы окно инспектора было справа от сайта (как у меня на картинке) и подвигайте мышью разделительную полосу влево-вправо, вы увидите, как контент, словно вода, течет, занимая новые позиции. На телефонной ширине блоки встанут не по горизонтали один за другим, а по вертикали — сверху вниз. То есть — упадут под предыдущие.

Десктоп:

Мобильный:

Да, не забудьте в хедер файла вставить строку <meta name=»viewport» content=»width=device-width»>. Она скажет браузеру на телефоне, что сайт нужно показывать в масштабе 1:1. По умолчанию браузер на телефоне показывает десктопную версию, уменьшенную так, чтобы сайт «влез» в телефон. Нам же нужно, чтобы сайт «потёк».

Итак, с чего начать

Идем на сайт бутстрапа: getbootstrap.com.

Жмем большую кнопку Download, скроллимся до вот этого момента:

Нам нужна кнопка в первой слева колонке (выделенная у меня сиреневым). Качаем бутстрап. Распаковываем архив и смотрим, что там у нас лежит. Папку fonts можно целиком закинуть в новый проект. А вот в js и css лежит много лишнего. Вряди ли вам понадобится дополнительная тема bootstrap-theme.min.css. По сути, вам нужно перекинуть в свою папку css только 1 файл: bootstrap.min.css, а в папку js — bootstrap.min.js.

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

В хедер, до зыкрывающего тега </header> вставляем локальный линк на bootstrap.min.css, а до закрывабщего тега </body> — локальный линк на ява-скрипт файл bootstrap.min.js:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<!-- 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>

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

Вот этот закомментированный блок:

<!-- Custom styles for this template -->
<!-- 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]-->

отвечает за обратную валидность, то есть — это костыли для старых версий ИЕ. Просто вставьте его и забудьте.

Естественно — теперь вам нужно подключить свои собственные стили и скрипты.

После этого перейдем к пробной верстке.