Верстка адаптивного макета на Bootstrap

В этой статье рассмотрим принципы создания адаптивно-фиксированного макета сайта с использованием фреймворков Bootstrap 3 и 4.
Для создания каких макетов предназначен фреймворк Bootstrap
Фреймворки Bootstrap 3 и 4 предназначены для создания адаптивных макетов сайтов. При этом различают два типа адаптивных макетов. Первый тип - это адаптивно-фиксированный, а второй - это адаптивно-резиновый или адаптивно-гибкий.
Адаптивно-фиксированный макет - это адаптивный макет, который имеет фиксированную ширину. Но это ширина является постоянной только в диапазоне определённой контрольной точки или типа устройства.
Например, в Bootstrap 4 адаптивно-фиксированный макет по умолчанию на контрольной точке sm
имеет ширину 540px, на md
- 720px, на lg
- 960px и т.д.
Адаптивно-резиновый макет - это адаптивный макет, который не имеет фиксированной ширины. На любой контрольной точке или типе устройстве его ширина всегда равна 100%. Т.е. он всегда занимает всю доступную ширину viewport браузера.
Более подробно ознакомиться с сеткой можно в этой (Bootstrap 3) или этой (Bootstrap 4) статье.
Основной принцип создания адаптивно макета с помощью Bootstrap
Основной порядок действий по созданию макета с помощью сетки Bootstrap:
- создать обёрточный контейнер, т.е. элемент с классом
container
илиcontainer-fluid
; - создать внутри обёрточного контейнера ряд, т.е. элемент с классом
row
; - создать внутри ряда определённую разметку с помощью адаптивных блоков, т.е. элементов с классом
col
;
- создать внутри адаптивного блока ряд и внутри него определённую разметку посредством адаптивных блоков;
- повторить действие 4 необходимое количество раз, пока не будет получен нужный макет страницы.
Пример создания макета с использованием Bootstrap 3
В качестве примера рассмотрим процесс создания нижепредставленного макета.

Данный макет состоит из 3 основных секций:
- шапки (HEADER);
- основного содержимого;
- футера (FOOTER).
Основное содержимое в свою очередь состоит из 2 секций: «MAIN» и «ASIDE».
Секция «ASIDE» ещё делится на 2 секции: «ASIDE #1» и «ASIDE #2».
Разработку макета с помощью Bootstrap обычно начинают с самых крохотных устройств (смартфонов).
Разработку макета начнём с создания основных секций:
<!-- HEADER -->
<header>
</header>
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<main>
</main>
<!-- FOOTER -->
<footer>
</footer>
Следующий шаг это создание обёрточных контейнеров внутри каждой секции.
<!-- HEADER -->
<header>
<div class="container">
</div>
</header>
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<section>
<div class="container">
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
</div>
</footer>
Перед созданием структуры основного содержимого с помощью адаптивных блоков поместим в неё (обёрточный контейнер) ряд.
...
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<section>
<div class="container">
<div class="row">
</div>
</div>
</section>
...
Создадим адаптивную разметку секции «Основное содержимое»:
...
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<section>
<div class="container">
<div class="row">
<!-- MAIN -->
<main class="col-md-8 col-lg-9">
</main>
<!-- ASIDE -->
<aside class="col-md-4 col-lg-3">
</aside>
</div>
</div>
</section>
...
Выполним адаптивную разметку секции ASIDE. Для этого сначала в данную секцию поместим ряд, а в него уже следующие адаптивные блоки:
...
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<section>
<div class="container">
<div class="row">
<!-- MAIN -->
<main class="col-md-8 col-lg-9">
</main>
<!-- ASIDE -->
<div class="col-md-4 col-lg-3">
<div class="row">
<!-- ASIDE #1 -->
<aside class="col-sm-6 col-md-12">
</aside>
<!-- ASIDE #2 -->
<aside class="col-sm-6 col-md-12">
</aside>
</div>
</div>
</div>
</div>
</section>
...
Итоговый HTML код макета:
<!-- HEADER -->
<header>
<div class="container">
</div>
</header>
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<section>
<div class="container">
<div class="row">
<!-- MAIN -->
<main class="col-md-8 col-lg-9">
</main>
<!-- ASIDE -->
<div class="col-md-4 col-lg-3">
<div class="row">
<!-- ASIDE #1 -->
<aside class="col-sm-6 col-md-12">
</aside>
<!-- ASIDE #2 -->
<aside class="col-sm-6 col-md-12">
</aside>
<div class="row">
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
</div>
</footer>
Процесс создания адаптивно-фиксированного макета:

Верстку этого макета можно же конечно выполнить и по-другому. Но данный вариант является более предпочтительным, т.к. каждая основная секция в этом макете является независимой.
Другие варианты вёрстки этого макета (не рекомендуется использовать).
1 вариант (все основные секции находятся в одном обёрточном контейнере):
<div class="container">
<!-- HEADER -->
<header>
</header>
<!-- ОСНОВНОЙ КОНТЕНТ -->
<section>
<div class="row">
<!-- MAIN -->
<main class="col-md-8 col-lg-9">
</main>
<!-- ASIDE -->
<div class="col-md-4 col-lg-3">
<div class="row">
<!-- ASIDE #1 -->
<aside class="col-sm-6 col-md-12">
</aside>
<!-- ASIDE #2 -->
<aside class="col-sm-6 col-md-12">
</aside>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
</footer>
</div>
2 вариант (все основные секции помещены в один ряд):
<div class="container">
<div class="row">
<!-- HEADER -->
<header class="col-xs-12">
</header>
<!-- ОСНОВНОЙ КОНТЕНТ -->
<section class="col-xs-12">
<div class="row">
<!-- MAIN -->
<main class="col-md-8 col-lg-9">
</main>
<!-- ASIDE -->
<div class="col-md-4 col-lg-3">
<div class="row">
<!-- ASIDE #1 -->
<aside class="col-sm-6 col-md-12">
</aside>
<!-- ASIDE #2 -->
<aside class="col-sm-6 col-md-12">
</aside>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="col-xs-12">
</footer>
</div>
</div>
3 вариант (каждая основная секция помещена в ряд):
<div class="container">
<div class="row">
<!-- HEADER -->
<header class="col-xs-12">
</header>
</div>
<div class="row">
<!-- ОСНОВНОЙ КОНТЕНТ -->
<section class="col-xs-12">
<div class="row">
<!-- MAIN -->
<main class="col-md-8 col-lg-9">
</main>
<!-- ASIDE -->
<div class="col-md-4 col-lg-3">
<div class="row">
<!-- ASIDE #1 -->
<aside class="col-sm-6 col-md-12">
</aside>
<!-- ASIDE #2 -->
<aside class="col-sm-6 col-md-12">
</aside>
</div>
</div>
</div>
</section>
</div>
<div class="row">
<!-- FOOTER -->
<footer class="col-xs-12">
</footer>
</div>
</div>
Пример создания макета с использованием Bootstrap 4
Алгоритм создания макета с помощью Bootstrap 4 практически не отличается от Bootstrap 3.
В качестве примера выполним нижепредставленный макет на Bootstrap 4.

Данный макет состоит из 4 основных секций:
- основной навигации (NAV #1);
- заголовка (HEADER);
- основного контента;
- футера (FOOTER).
Основной контент в свою очередь состоит из 3 секций: ARTICLE, блока дополнительной навигации (NAV #2) и ASIDE.
HTML код для вышеприведённого адаптивно-фиксированного макета, построенного с помощью фреймворка Bootstrap 4:
<!-- NAV #1 и HEADER -->
<div class="top">
<div class="container">
<div class="row">
<!-- NAV #1 -->
<nav class="col-md-6 col-xl-12 order-md-1 order-xl-0">
</nav>
<!-- HEADER -->
<header class="col-md-6 col-xl-12 order-md-0 order-xl-1">
</header>
</div>
</div>
</div>
<!-- ОСНОВНОЙ КОНТЕНТ -->
<main>
<div class="container">
<div class="row">
<!-- NAV #2 -->
<nav class="col-xl-2">
</nav>
<!-- ARTICLE -->
<article class="col-md-8 col-xl-7">
</article>
<!-- ASIDE -->
<aside class="col-md-4 col-xl-3">
</aside>
</div>
</div>
</main>
<!-- FOOTER -->
<footer>
<div class="container">
</div>
</footer>
Вопрос: почему в шаблоне на бутстрапе 4 контейнер вложен в секцию футер, а не сама секция футер классифицирована как контейнер? Ведь с хедером вы так сделали.
И как вообще принято делать в продакшене? Спасибо!
Если мои комментарии по корректировке опечаток не нужны, прошу сообщить мне, тогда я больше не стану их писать. )))
Для добавления своих адаптивных классов необходимо использовать такую конструкцию:
Код...
Вышеприведённый CSS код добавляет адаптивный класс xss, который будет определять ширину блока для viewport, имеющего ширину от 576px до 767px. Если push, pull и offset не используете, то их можно удалить из вышеприведённого кода.
Если нужны ещё какие-то дополнительные адаптивные классы, то просто дублируете вышеприведённый код и изменяете в нём его область действия (min-width и max-width) и название классов.
Чтобы отменить действия xs на диапазоне xss потребуется правка файла bootstrap.css, и если используете его сжатую версию, то и последующая его минификация (например, с помощью online инструмента).
Для этого необходимо в файле bootstrap.css найти строчки и заменить в них значение 767px на следующее (т.е. на 575px).
CSS код...
Классы для xss можно добавить в свой CSS файл.
CSS код...
В данном примере футер прижат к низу страницы и его высота составляет 100px.
Добавить в CSS стиль:
На страницу (демо) тоже добавил, но проверить не могу так как под рукой нет такого браузера.
Этот размер как пример просто. Вроде нормально растягивается.