В этой статье рассмотрим принципы создания адаптивно-фиксированного макета сайта с использованием фреймворков Bootstrap 3 и 4.

Для создания каких макетов предназначен фреймворк Bootstrap?

Фреймворки Bootstrap 3 и 4 предназначены для создания адаптивных макетов сайтов. При этом различают два типа адаптивных макетов. Первый тип - это адаптивно-фиксированный, а второй - это адаптивно-резиновый или адаптивно-гибкий.

Адаптивно-фиксированный макет - это адаптивный макет, который имеет фиксированную ширину. Но это ширина является постоянной только в диапазоне определённой контрольной точки или типа устройства.

Например, в Bootstrap 4 адаптивно-фиксированный макет по умолчанию на контрольной точке sm имеет ширину 540px, на md - 720px, на lg - 960px и т.д.

Адаптивно-резиновый макет - это адаптивный макет, который не имеет фиксированной ширины. На любой контрольной точке или типе устройстве его ширина всегда равна 100%. Т.е. он всегда занимает всю доступную ширину viewport браузера.

Более подробно ознакомиться с сеткой можно в этой (Bootstrap 3) или этой (Bootstrap 4) статье.

Основной принцип создания адаптивно макета с помощью Bootstrap

Основной порядок действий по созданию макета с помощью сетки Bootstrap:

  1. создать обёрточный контейнер, т.е. элемент с классом container или container-fluid;
  2. создать внутри обёрточного контейнера ряд, т.е. элемент с классом row;
  3. создать внутри ряда определённую разметку с помощью адаптивных блоков, т.е. элементов с классом col;
  4. создать внутри адаптивного блока ряд и внутри него определённую разметку посредством адаптивных блоков;
  5. повторить действие 4 необходимое количество раз, пока не будет получен нужный макет страницы.

Пример создания макета с использованием Bootstrap 3

В качестве примера рассмотрим процесс создания нижепредставленного макета.

Bootstrap 3 - Дизайн макета на устройствах  xs, sm, md и lg

Данный макет состоит из 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>

Процесс создания адаптивно-фиксированного макета:

Bootstrap 3 - Процесс создания адаптивно-фиксированного макета

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

Другие варианты вёрстки этого макета (не рекомендуется использовать).

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.

Bootstrap 4 - Дизайн макета на устройствах  xs, sm, md, lg и xl

Данный макет состоит из 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>