Верстка адаптивного макета на 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 стиль:
На страницу (демо) тоже добавил, но проверить не могу так как под рукой нет такого браузера.
Этот размер как пример просто. Вроде нормально растягивается.