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

15.08.2022

97.4K

Содержание:

Для создания каких макетов предназначен фреймворк Bootstrap
Основной принцип создания адаптивно макета с помощью Bootstrap
Пример создания макета с использованием Bootstrap 3
Пример создания макета с использованием Bootstrap 4
Комментарии

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

Разработку макета начнём с создания основных секций:

HTML

<!-- HEADER -->
<header>

</header>
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<main>

</main>
<!-- FOOTER -->
<footer>

</footer>

Следующий шаг это создание обёрточных контейнеров внутри каждой секции.

HTML

<!-- HEADER -->
<header>
  <div class="container">

  </div>
</header>
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<section>
  <div class="container">

  </div>
</section>
<!-- FOOTER -->
<footer>
  <div class="container">

  </div>
</footer>

Перед созданием структуры основного содержимого с помощью адаптивных блоков поместим в неё (обёрточный контейнер) ряд.

HTML

...
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<section>
  <div class="container">
    <div class="row">

    </div>
  </div>
</section>
...

Создадим адаптивную разметку секции «Основное содержимое»:

HTML

...
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<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. Для этого сначала в данную секцию поместим ряд, а в него уже следующие адаптивные блоки:

HTML

...
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<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 код макета:

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 вариант (все основные секции находятся в одном обёрточном контейнере):

HTML

<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 вариант (все основные секции помещены в один ряд):

HTML

<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 вариант (каждая основная секция помещена в ряд):

HTML

<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:

HTML

<!-- 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>

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

Евгений

20.05.2021, 21:52

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

Sergey Ionov

12.06.2018, 12:40

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

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

Если мои комментарии по корректировке опечаток не нужны, прошу сообщить мне, тогда я больше не стану их писать. )))

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

12.06.2018, 13:33

Спасибо, откорректировал. Комментарии по корректировке опечаток, конечно, пишите, от этого только плюс.

Sergey Ionov

12.06.2018, 13:40

Ok, спасибо.

Max

30.03.2017, 23:40

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

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

01.04.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.04.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 не отображаются.

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

10.04.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;
  }
}

Max

11.04.2017, 19:42

По-ходу, соточка с меня)

Аноним

13.09.2016, 08:15

Автор привет! Спасибо, все изложено отлично! Подскажи, а в какой программе визуально рисовал слои?

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

13.09.2016, 23:14

Можно в любой программе, в которой есть векторный редактор. Точно не помню, это был LibreOffice или Word.

Аноним

09.05.2016, 20:58

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

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

13.09.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.03.2016, 08:57

Александр, спасибо за статью. У меня такой вопрос: можно ли реализовать макет, который растягивается только на больших и средних экранах, а при ширине например 960px и меньше фиксируется и появляется скрол.

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

06.03.2016, 12:13

Конечно можно.
Добавить в CSS стиль:

.container, .container-fluid {
  min-width: 960px !important;
}

Аноним

05.03.2016, 21:55

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

Аноним

29.02.2016, 12:45

Спасибо! Всё очень интересно и познавательно. Вопрос такой… А как приручить IE8? Демо макета показывает в один столбец и цвет article белый.

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

29.02.2016, 13:00

Добавить в раздел head следующие строки:

<!-- 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]-->

На страницу (демо) тоже добавил, но проверить не могу так как под рукой нет такого браузера.

Аноним

29.02.2016, 17:18

Теперь всё отлично!

Аноним

27.02.2016, 17:36

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

Аноним

25.11.2015, 21:03

поправка

style="max-width="1400px;

Аноним

02.12.2015, 00:30

style="max-width:1400px;

Владислав

14.02.2016, 12:56

style=«max-width:1400px»

Аноним

25.11.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.02.2016, 05:45

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

Аноним

17.11.2015, 20:26

Вариант 2 альтернативной разметки. Первый блок в секции aside принимает цвет от блока header без возможности его изменения. В чем причина такого поведения? (Bootstrap 3.3.5)

Аноним

17.11.2015, 20:29

ууупс) все нормально не досмотрел

Аноним

08.11.2015, 10:02

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

Аноним

25.10.2015, 20:31

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

Аноним

29.05.2015, 10:42

А для чего нужен файл «bootstrap-theme.min.css», и без него вроде всё нормально работает?

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

29.05.2015, 12:30

bootstrap-theme.css — это дополнительный файл CSS, который не обязательно использовать. Там содержатся стили для придания 3D эффектов кнопкам и некоторым другим компонентам платформы Twitter Bootstrap 3. Файл bootstrap-theme.min.css — это его минимизированная (сжатая) версия.