Bootstrap - Основы создания адаптивно-фиксированного макета сайта

Александр Мальцев
Александр Мальцев
83K
31
Bootstrap - Основы создания адаптивно-фиксированного макета сайта
Содержание:
  1. Для создания каких макетов предназначен фреймворк Bootstrap
  2. Основной принцип создания адаптивно макета с помощью Bootstrap
  3. Пример создания макета с использованием Bootstrap 3
  4. Пример создания макета с использованием Bootstrap 4
  5. Комментарии

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

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

  1. Евгений
    20 мая 2021, 21:52
    Александр, спасибо за обстоятельные статьи, очень нравится как вы пишете.
    Вопрос: почему в шаблоне на бутстрапе 4 контейнер вложен в секцию футер, а не сама секция футер классифицирована как контейнер? Ведь с хедером вы так сделали.
    И как вообще принято делать в продакшене? Спасибо!
    1. 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, спасибо.
      2. Max
        30 марта 2017, 23:40
        Здравствуйте, в очередной раз обращаюсь к вам за ответом. Страница которую верстаю практически готова. Осталось сделать адаптацию под разрешение 320*480. Не знаете как подключить теги xxxs или xxs или tn чтобы в коде колонкам можно было задать это разрешение? Все ответы ведут на github но в английском не силен.(
        1. Александр Мальцев
          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) и название классов.
          1. 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
                По-ходу, соточка с меня)
        2. Дмитрий
          13 сентября 2016, 08:15
          Автор привет! Спасибо, все изложено отлично! Подскажи, а в какой программе визуально рисовал слои?
          1. Александр Мальцев
            13 сентября 2016, 23:14
            Можно в любой программе, в которой есть векторный редактор. Точно не помню, это был LibreOffice или Word.
          2. константин
            09 мая 2016, 20:58
            А как решить вопрос с прижатием футера? Для проверки нажать ctrl — и довести хотя бы до 50% то можно увидеть что футер оторван от низа браузера. Спасибо
            1. Александр Мальцев
              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>
              
            2. Евгений
              06 марта 2016, 08:57
              Александр, спасибо за статью. У меня такой вопрос: можно ли реализовать макет, который растягивается только на больших и средних экранах, а при ширине например 960px и меньше фиксируется и появляется скрол.
              1. Александр Мальцев
                06 марта 2016, 12:13
                Конечно можно.
                Добавить в CSS стиль:
                .container, .container-fluid {
                  min-width: 960px !important;
                }
                
              2. Sergey
                05 марта 2016, 21:55
                Спасибо за статью, всё доступно и понятно.
                1. Bob
                  29 февраля 2016, 12:45
                  Спасибо! Всё очень интересно и познавательно. Вопрос такой… А как приручить IE8? Демо макета показывает в один столбец и цвет article белый.
                  1. Александр Мальцев
                    29 февраля 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]-->
                    
                    На страницу (демо) тоже добавил, но проверить не могу так как под рукой нет такого браузера.
                    1. Bob
                      29 февраля 2016, 17:18
                      Теперь всё отлично!
                  2. Бутко Александр
                    27 февраля 2016, 17:36
                    Очень ценный урок. Можно даже сказать, уникальный по своей простоте и понятности. Спасибо.
                    1. Егор
                      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»
                      2. Егор
                        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>
                        
                        Этот размер как пример просто. Вроде нормально растягивается.
                        1. Анатолий
                          05 февраля 2016, 05:45
                          /* дополнительные медиа запросы */
                          @media (min-width: 1300px) {
                          	.container {
                          		width: 1240px;
                          	}
                          }
                          @media (min-width: 1400px) {
                          	.container {
                          		width: 1340px;
                          	}
                          }
                          
                        2. Dimas
                          17 ноября 2015, 20:26
                          Вариант 2 альтернативной разметки. Первый блок в секции aside принимает цвет от блока header без возможности его изменения. В чем причина такого поведения? (Bootstrap 3.3.5)
                          1. Dimas
                            17 ноября 2015, 20:29
                            ууупс) все нормально не досмотрел
                          2. Гаджимурад
                            08 ноября 2015, 10:02
                            Спасибо большое за доходчивое объяснение
                            1. Лора
                              25 октября 2015, 20:31
                              Вот такенное Вам спасибо за наглядный и такой наиподробнейший урок!!!
                              1. Дамир
                                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 — это его минимизированная (сжатая) версия.
                                Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.