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

Александр Мальцев

27.08.2021

84K

Содержание:

В этой статье рассмотрим принципы создания адаптивно-фиксированного макета сайта с использованием фреймворков 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

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

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>

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

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

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

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>

Евгений

20 мая 2021, 21:52

Александр, спасибо за обстоятельные статьи, очень нравится как вы пишете.
Вопрос: почему в шаблоне на бутстрапе 4 контейнер вложен в секцию футер, а не сама секция футер классифицирована как контейнер? Ведь с хедером вы так сделали.
И как вообще принято делать в продакшене? Спасибо!
Sergey Ionov

12 июня 2018, 12:40

Выполним настройку адаптивных блоков для остальных устройств, на которых каждый из них занимает 12 колонок Bootstrap (col-xs-12 col-md-12)
Здесь видимо опечатка, т.к. размер блока для md мы уже определили в предыдущем шаге и в коде ниже написано (col-xs-12 col-sm-12).

Если мои комментарии по корректировке опечаток не нужны, прошу сообщить мне, тогда я больше не стану их писать. )))
1. Александр Мальцев
  
  12 июня 2018, 13:33
  
  Спасибо, откорректировал. Комментарии по корректировке опечаток, конечно, пишите, от этого только плюс.
  1. Sergey Ionov
    
    12 июня 2018, 13:40
    
    Ok, спасибо.

Max

30 марта 2017, 23:40

Здравствуйте, в очередной раз обращаюсь к вам за ответом. Страница которую верстаю практически готова. Осталось сделать адаптацию под разрешение 320*480. Не знаете как подключить теги xxxs или xxs или tn чтобы в коде колонкам можно было задать это разрешение? Все ответы ведут на github но в английском не силен.(

Александр Мальцев

01 апреля 2017, 17:09

Здравствуйте.
Для добавления своих адаптивных классов необходимо использовать такую конструкцию:
Код...

@media (min-width: 576px) and (max-width:767px){
  .col-xss-1, .col-xss-2, .col-xss-3, .col-xss-4, .col-xss-5, .col-xss-6, .col-xss-7, .col-xss-8, .col-xss-9, .col-xss-10, .col-xss-11, .col-xss-12 {
    float: left;
  }
  .col-xss-12 {
    width: 100%;
  }
  .col-xss-11 {
    width: 91.66666667%;
  }
  .col-xss-10 {
    width: 83.33333333%;
  }
  .col-xss-9 {
    width: 75%;
  }
  .col-xss-8 {
    width: 66.66666667%;
  }
  .col-xss-7 {
    width: 58.33333333%;
  }
  .col-xss-6 {
    width: 50%;
  }
  .col-xss-5 {
    width: 41.66666667%;
  }
  .col-xss-4 {
    width: 33.33333333%;
  }
  .col-xss-3 {
    width: 25%;
  }
  .col-xss-2 {
    width: 16.66666667%;
  }
  .col-xss-1 {
    width: 8.33333333%;
  }
  .col-xss-pull-12 {
    right: 100%;
  }
  .col-xss-pull-11 {
    right: 91.66666667%;
  }
  .col-xss-pull-10 {
    right: 83.33333333%;
  }
  .col-xss-pull-9 {
    right: 75%;
  }
  .col-xss-pull-8 {
    right: 66.66666667%;
  }
  .col-xss-pull-7 {
    right: 58.33333333%;
  }
  .col-xss-pull-6 {
    right: 50%;
  }
  .col-xss-pull-5 {
    right: 41.66666667%;
  }
  .col-xss-pull-4 {
    right: 33.33333333%;
  }
  .col-xss-pull-3 {
    right: 25%;
  }
  .col-xss-pull-2 {
    right: 16.66666667%;
  }
  .col-xss-pull-1 {
    right: 8.33333333%;
  }
  .col-xss-pull-0 {
    right: auto;
  }
  .col-xss-push-12 {
    left: 100%;
  }
  .col-xss-push-11 {
    left: 91.66666667%;
  }
  .col-xss-push-10 {
    left: 83.33333333%;
  }
  .col-xss-push-9 {
    left: 75%;
  }
  .col-xss-push-8 {
    left: 66.66666667%;
  }
  .col-xss-push-7 {
    left: 58.33333333%;
  }
  .col-xss-push-6 {
    left: 50%;
  }
  .col-xss-push-5 {
    left: 41.66666667%;
  }
  .col-xss-push-4 {
    left: 33.33333333%;
  }
  .col-xss-push-3 {
    left: 25%;
  }
  .col-xss-push-2 {
    left: 16.66666667%;
  }
  .col-xss-push-1 {
    left: 8.33333333%;
  }
  .col-xss-push-0 {
    left: auto;
  }
  .col-xss-offset-12 {
    margin-left: 100%;
  }
  .col-xss-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xss-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xss-offset-9 {
    margin-left: 75%;
  }
  .col-xss-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xss-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xss-offset-6 {
    margin-left: 50%;
  }
  .col-xss-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xss-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xss-offset-3 {
    margin-left: 25%;
  }
  .col-xss-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xss-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xss-offset-0 {
    margin-left: 0;
  }
}

Вышеприведённый CSS код добавляет адаптивный класс xss, который будет определять ширину блока для viewport, имеющего ширину от 576px до 767px. Если push, pull и offset не используете, то их можно удалить из вышеприведённого кода.
Если нужны ещё какие-то дополнительные адаптивные классы, то просто дублируете вышеприведённый код и изменяете в нём его область действия (min-width и max-width) и название классов.

Max

10 апреля 2017, 14:54

Спасибо, огромное! Еще одна проблемка небольшая. Можно как то привязать hidden-xss и visible-xss-12. К примеру, hidden-xs, hidden-sm, hidden-md, hidden-lg, -> значит должно отображаться только на xss. Проблема в том, кода пишу hidden-xs bootstrap не отображает на разрешении 320х480, как вы сами понимаете xs для него конечная точка less768. Это я к тому, что мне некоторые элементы нужно отобразить, которые в xs не отображаются.
1. Александр Мальцев
  
  10 апреля 2017, 16:20
  Например, имеем такие устройства: xs (<=575px) -> xss (>=576 & <=767px) -> sm (>-768px & <=991px) -> md (>=992px & <=1199px) -> lg (>=1200px).
  Чтобы отменить действия xs на диапазоне xss потребуется правка файла bootstrap.css, и если используете его сжатую версию, то и последующая его минификация (например, с помощью online инструмента).
  Для этого необходимо в файле bootstrap.css найти строчки и заменить в них значение 767px на следующее (т.е. на 575px).
  CSS код...
  @media (max-width: 575px) { .hidden-xs { display: none !important; } } @media (max-width: 576px) { .visible-xs-block { display: block !important; } } @media (max-width: 576px) { .visible-xs-inline { display: inline !important; } } @media (max-width: 576px) { .visible-xs-inline-block { display: inline-block !important; } }
  Классы для xss можно добавить в свой CSS файл.
  CSS код...
  @media (min-width: 576px) and (max-width: 767px) { .hidden-xss { display: none !important; } } @media (min-width: 576px) and (max-width: 767px) { .visible-xss-block { display: block !important; } } @media (min-width: 576px) and (max-width: 767px) { .visible-xss-inline { display: inline !important; } } @media (min-width: 576px) and (max-width: 767px) { .visible-xss-inline-block { display: inline-block !important; } }
  1. Max
    
    11 апреля 2017, 19:42
    
    По-ходу, соточка с меня)

Дмитрий

13 сентября 2016, 08:15

Автор привет! Спасибо, все изложено отлично! Подскажи, а в какой программе визуально рисовал слои?
1. Александр Мальцев
  
  13 сентября 2016, 23:14
  
  Можно в любой программе, в которой есть векторный редактор. Точно не помню, это был LibreOffice или Word.

константин

09 мая 2016, 20:58

А как решить вопрос с прижатием футера? Для проверки нажать ctrl — и довести хотя бы до 50% то можно увидеть что футер оторван от низа браузера. Спасибо

Александр Мальцев

13 сентября 2016, 23:12

Используйте следующую структуру страницы.
В данном примере футер прижат к низу страницы и его высота составляет 100px.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>...</title>
  <style>
    * {
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .wrapper {
      min-height: 100%;
      margin: 0 auto -100px;
    }
    .footer, .push {
      height: 100px;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <!-- Основное содержимое страницы (кроме футера) -->
  <!-- ... -->

  <!-- Пустой блок -->
  <div class="push"></div>
</div>
<div class="footer">
<!-- Сожержимое футера -->
<!-- ... -->
</div>
</body>
</html>

Евгений

06 марта 2016, 08:57

Александр, спасибо за статью. У меня такой вопрос: можно ли реализовать макет, который растягивается только на больших и средних экранах, а при ширине например 960px и меньше фиксируется и появляется скрол.
1. Александр Мальцев
  
  06 марта 2016, 12:13
  Конечно можно.
  Добавить в CSS стиль:
```
.container, .container-fluid {
  min-width: 960px !important;
}
```
Sergey

05 марта 2016, 21:55

Спасибо за статью, всё доступно и понятно.
Bob

29 февраля 2016, 12:45

Спасибо! Всё очень интересно и познавательно. Вопрос такой… А как приручить IE8? Демо макета показывает в один столбец и цвет article белый.
1. Александр Мальцев
  
  29 февраля 2016, 13:00
  Добавить в раздел head следующие строки:
```



```
  На страницу (демо) тоже добавил, но проверить не могу так как под рукой нет такого браузера.
  1. Bob
    
    29 февраля 2016, 17:18
    
    Теперь всё отлично!
Бутко Александр

27 февраля 2016, 17:36

Очень ценный урок. Можно даже сказать, уникальный по своей простоте и понятности. Спасибо.
Егор

25 ноября 2015, 21:03
поправка
```
style="max-width="1400px;
```
1. GLOBALNET
  
  02 декабря 2015, 00:30
```
style="max-width:1400px;
```
  1. Владислав
    
    14 февраля 2016, 12:56
    
    style=«max-width:1400px»

Егор

25 ноября 2015, 20:55

Здравствуйте, а как можно увеличить ширину container на col-lg-12? Например до 1400px? Я попробовал сделать так:

 <div class="wrapper" style="width="1400px; margin:0 auto;">
     <div class="container-fluid">
         <div class="row">
             <div class="col-md-12">....</div>
         </div>
     </div>
 </div>

Этот размер как пример просто. Вроде нормально растягивается.

Анатолий

05 февраля 2016, 05:45

/* дополнительные медиа запросы */
@media (min-width: 1300px) {
	.container {
		width: 1240px;
	}
}
@media (min-width: 1400px) {
	.container {
		width: 1340px;
	}
}

Dimas

17 ноября 2015, 20:26

Вариант 2 альтернативной разметки. Первый блок в секции aside принимает цвет от блока header без возможности его изменения. В чем причина такого поведения? (Bootstrap 3.3.5)
1. Dimas
  
  17 ноября 2015, 20:29
  
  ууупс) все нормально не досмотрел
Гаджимурад

08 ноября 2015, 10:02

Спасибо большое за доходчивое объяснение
Лора

25 октября 2015, 20:31

Вот такенное Вам спасибо за наглядный и такой наиподробнейший урок!!!
Дамир

29 мая 2015, 10:42

А для чего нужен файл «bootstrap-theme.min.css», и без него вроде всё нормально работает?
1. Александр Мальцев
  
  29 мая 2015, 12:30
  
  bootstrap-theme.css — это дополнительный файл CSS, который не обязательно использовать. Там содержатся стили для придания 3D эффектов кнопкам и некоторым другим компонентам платформы Twitter Bootstrap 3. Файл bootstrap-theme.min.css — это его минимизированная (сжатая) версия.

Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.

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

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

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

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

Комментарии: