Bootstrap 3 - Адаптивно-фиксированный макет сайта

На этом уроке Вы научитесь создавать адаптивно-фиксированные макеты сайтов с помощью платформы Twitter Bootstrap 3.

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

  • адаптивно-фиксированный макет - это адаптивный макет, имеющий фиксированную ширину, которая остаётся постоянной только в пределах некоторого диапазона, характерного для xs, sm, md или lg.
  • адаптивно-резиновый (гибкий) макет - это адаптивный макет, имеющий резиновую (плавающую) ширину. Т.е. он (адаптивно-резиновый макет) на любых устройствах (xs, sm, md и lg) занимает всю доступную ширину (100%) рабочей области окна (вкладки) браузера.
  • создать элемент div с классом container. Данный элемент будет служить контейнером, в который мы будем помещать остальные элементы.
  • создать внутри контейнера элемент div с классом row. Данный элемент будем называть строкой или рядом. Он предназначен для того, чтобы в него помещать адаптивные блоки.
  • создать внутри ряда (блок div с классом row) адаптивные блоки. Адаптивные блоки - это элементы div с классами col-xs-*, col-sm-*, col-md-*, col-lg-* (* - это число от 1 до 12, которое определяет его ширину на определенном устройстве). Они называются адаптивными, потому что они могут иметь разную ширину на разных устройствах. Данные блоки являются основными кирпичиками, с помощью которых строится адаптивный макет веб-страницы.
    Например:
    <div class="col-xs-6 col-sm-5 col-md-3 col-lg-2"></div>
    
    Этот адаптивный блок на устройстве xs будет иметь ширину 6, на sm - 5, на md - 3, на lg - 2.
    Ширина адаптивных блоков задаётся с помощью колонок Bootstrap, это такая величина, которая зависит от ширины ряда, в который данный блок помещён. Минимальная ширина адаптивного блока - 1 колонка Bootstrap (1/12 = 8.3%), в этом состоянии блок будет занимать 1/12 ширины ряда (блок div с классом row).

    Bootstrap 3 - минимальная ширина адаптивного блока

    Максимальная ширина адаптивного блока - 12 колонок Bootstrap (12/12 = 100%), в этом состоянии данный блок будет занимать всю ширину ряда.

    Bootstrap 3 - максимальная ширина адаптивного блока

    Внутри ряда блоки располагаются строками, в одну строку помещаются блоки, суммарное количество колонок Bootstrap которых для данного устройства не превышает число 12. Если все блоки не могут быть расположены на одной строке (суммарное количество их колонок превышает число 12), то они переносятся на 2 строку, потом на 3 и т.д. до тех пор, пока они не будут все размещены внутри этого ряда.

Более подробно познакомиться с системой сеток Twitter Bootstrap можно на уроке "Bootstrap - Система сеток".

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

  • Шапка или верхний блок (header);
  • Основной блок (main);
  • Футер или нижний блок (footer).

Основной блок (main) состоит из главного (article) и дополнительного (aside) блоков. Дополнительный блок (aside) содержит "Блок 1" (block1) и "Блок 2" (block2).

Разработку макета в Twitter Bootstrap 3 обычно начинают с xs (смартфонов) и заканчивают lg (компьютерами). Ну а мы поступим иначе, начнём разработку с самого "сложного" устройства lg, в котором рассмотрим все особенности, а закончим самым "простым" xs.

На следующих изображениях мы представим, как должен выглядеть макет на разных устройствах:

Bootstrap 3 - Вид макета на устройствах lg и md

Bootstrap 3 - Вид макета на устройствах sm

Bootstrap 3 - Вид макета на устройствах xs

  1. Создание основных блоков:

    Bootstrap 3 - создание макета (создание основных блоков)

    <body>
    
      <!--Шапка-->
      <header></header>
      <!--Основной блок-->
      <main></main>
      <!--Футер-->
      <footer></footer>
    
    </body>
    
  2. Создание контейнеров внутри каждого блока:

    Bootstrap 3 - создание макета (создание контейнеров)

    <body>
    
      <!--Шапка-->
      <header>
        <div class="container"></div>
      </header>
      <!--Основной блок-->
      <main>
        <div class="container"></div>
      </main>
      <!--Футер-->
      <footer>
        <div class="container"></div>
      </footer>
    
    </body>
    
  3. Создание блока с классом row внутри контейнера основного блока:

    Bootstrap 3 - создание макета (создание блока с классом row)

    <body>
    
      <!--Шапка-->
      <header>
        <div class="container"></div>
      </header>
      <!--Основной блок-->
      <main>
        <div class="container">
          <!--Блок с классом row-->
          <div class="row"></div>
        </div>
      </main>
      <!--Футер-->
      <footer>
        <div class="container"></div>
      </footer>
    
    </body>
    
  4. Выполним разметку основного блока для устройств lg и md, т.е. создадим 2 адаптивных блока (article и aside) внутри блока с классом row.
    Блок article имеет на устройствах lg ширину, равную 9 колонкам Bootstrap (col-lg-9) и на устройствах md - ширину, равную 8 колонкам Bootstrap (col-md-8). А блок aside имеет на устройствах lg ширину, равную 3 колонкам Bootstrap (col-lg-3) и на устройствах md - ширину, равную 4 колонкам Bootstrap (col-md-4).

    Bootstrap 3 - создание макета (разметка блока row)

    <body>
    
      <!--Шапка-->
      <header>
        <div class="container"></div>
      </header>
      <!--Основной блок-->
      <main>
        <div class="container">
          <div class="row">
            <!--Адаптивный блок article-->
            <article class="col-md-8 col-lg-9"></article>
            <!--Адаптивный блок aside-->
            <aside class="col-md-4 col-lg-3"></aside>        
          </div>
        </div>
      </main>
      <!--Футер-->
      <footer>
        <div class="container"></div>
      </footer>
    
    </body>
    
    Выполним настройку адаптивных блоков для остальных устройств, на которых каждый из них занимает 12 колонок Bootstrap (col-xs-12 col-md-12).
    <body>
    
      <!--Шапка-->
      <header>
        <div class="container"></div>
      </header>
      <!--Основной блок-->
      <main>
        <div class="container">
          <div class="row">
            <!--Адаптивный блок article-->
            <article class="col-xs-12 col-sm-12 col-md-8 col-lg-9"></article>
            <!--Адаптивный блок aside-->
            <aside class="col-xs-12 col-sm-12 col-md-4 col-lg-3"></aside>        
          </div>
        </div>
      </main>
      <!--Футер-->
      <footer>
        <div class="container"></div>
      </footer>
    
    </body>
    
  5. Выполним разметку правого блока (aside), который состоит из "Блок 1" и "Блок 2".
    Если выполнить разметку без блока row, то расстояние от блока aside до содержимого "Блок 1" и "Блок 2" будет составлять слева и справа по 30px. Расстояние в 30px испортит общее впечатление о веб-странице, т.к. всё остальное будет выполнено с отступами в 15px.

    Bootstrap 3 - создание макета (разметка без блока row)

    Если выполнить разметку с блоком row, то он уберёт внутренние отступы блока aside за счёт своих внешних отрицательных отступов слева и справа, которые тоже равны по 15px.

    Bootstrap 3 - создание макета (разметка с блоком row)

    Внутри блока с классом row создадим блоки "Блок 1" и "Блок 2".
    "Блок 1" и "Блок 2" будет иметь следующую ширину: на lg, md и на xs - 12 колонок Bootstrap, sm - 6 колонок Bootstrap.

    Bootstrap 3 - финальная структура макета

  6. <body>
    
      <!--Шапка-->
      <header>
        <div class="container"></div>
      </header>
      <!--Основной блок-->
      <main>
        <div class="container">
          <!--Ряд, блок с классом row-->
          <div class="row">
            <!--Адаптивный блок article-->
            <article class="col-xs-12 col-sm-12 col-md-8 col-lg-9"></article>
            <!--Адаптивный блок aside-->
            <aside class="col-xs-12 col-sm-12 col-md-4 col-lg-3">
              <!--Ряд, блок с классом row-->
              <div class="row">
                <!--Адаптивный блок 1-->
                <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12"></div>
                <!--Адаптивный блок 2-->
                <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12"></div>
              </div>
            </aside>        
          </div>
        </div>
      </main>
      <!--Футер-->
      <footer>
        <div class="container"></div>
      </footer>
    
    </body>
    
  7. Упростим код разметки. Для этого в код внесём следующие изменения:
    • Классы col-lg-12 и col-md-12 можно заменить на col-md-12. Т.к. класс col-md-12 будет влиять не только на разметку для устройств со средним экраном (md), но и на устройства с большим экраном (lg).
    • Класс col-xs-12 можно упустить. Т.к. адаптивные блоки на устройствах с очень маленьким экраном (xs) по умолчанию занимают всю ширину ряда (т.е. 12 колонок Bootstrap).
    <body>
    
      <!--Шапка-->
      <header>
        <div class="container"></div>
      </header>
      <!--Основной блок-->
      <main>
        <div class="container">
          <!--Ряд, блок с классом row-->
          <div class="row">
            <!--Адаптивный блок article-->
            <article class="col-sm-12 col-md-8 col-lg-9"></article>
            <!--Адаптивный блок aside-->
            <aside class="col-sm-12 col-md-4 col-lg-3">
              <!--Ряд, блок с классом row-->
              <div class="row">
                <!--Адаптивный блок 1-->
                <div class="col-sm-6 col-md-12"></div>
                <!--Адаптивный блок 2-->
                <div class="col-sm-6 col-md-12"></div>
              </div>
            </aside>        
          </div>
        </div>
      </main>
      <!--Футер-->
      <footer>
        <div class="container"></div>
      </footer>
    
    </body>
    
Итоговый код адаптивно-фиксированного макета веб-страницы:
<!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">
    <title>Адаптивно-фиксированный макет веб-страницы</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!--[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]-->
  </head>
  <body>
    <header>
      <div class="container">
        <!--Содержимое-->
      </div>
    </header>
    <main>
      <div class="container">
        <div class="row">
          <article class="col-sm-12 col-md-8 col-lg-9">
            <!--Содержимое-->
          </article>
          <aside class="col-sm-12 col-md-4 col-lg-3">
            <div class="row">
              <div class="col-sm-6 col-md-12">
                <!--Содержимое-->
              </div>
              <div class="col-sm-6 col-md-12">
                <!--Содержимое-->
              </div>
            </div>
          </aside>        
        </div>
      </div>
    </main>
    <footer>
      <div class="container">
        <!--Содержимое-->
      </div>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

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

Например, если потребуется изменить ширину футера так, чтобы он занимал всю ширину окна браузера, то Вам будет достаточно просто изменить класс container на container-fluid.

    <!--...-->
    <footer>
      <div class="container-fluid">
        <!--Содержимое-->
      </div>
    </footer>
    <!--...-->   

Демо адаптивно-фиксированного макета

  1. Этот способ отличается от предыдущего тем, что разметку мы начинаем с контейнера, т.е. блока с классом container.
    <body>
      <div class="container">
        <!--Шапка-->
        <header>
          <!--Содержимое-->
        </header>
        <!--Основной блок-->
        <main>
          <!--Ряд, блок с классом row-->
          <div class="row">
            <!--Адаптивный блок article-->
            <article class="col-sm-12 col-md-8 col-lg-9">
              <!--Содержимое-->
            </article>
            <!--Адаптивный блок aside-->
            <aside class="col-sm-12 col-md-4 col-lg-3">
              <!--Ряд, блок с классом row-->
              <div class="row">
                <!--Адаптивный блок 1-->
                <div class="col-sm-6 col-md-12">
                  <!--Содержимое-->
                </div>
                <!--Адаптивный блок 2-->
                <div class="col-sm-6 col-md-12">
                  <!--Содержимое-->
                </div>
              </div>
            </aside>    
          </div>
        </main>
        <!--Футер-->
        <footer>
          <!--Содержимое-->
        </footer>
      </div>
    </body>
    
  2. Этот способ отличается от предыдущих тем, что все блоки с содержимым являются адаптивными.
    <body>
      <div class="container">
        <div class="row">
          <!--Шапка-->
          <header class="col-sm-12">
            <!--Содержимое-->
          </header>
        </div>
        <!--Основной блок-->
        <main class="row">
          <!--Адаптивный блок article-->
          <article class="col-sm-12 col-md-8 col-lg-9">
            <!--Содержимое-->
          </article>
          <!--Адаптивный блок aside-->
          <aside class="col-sm-12 col-md-4 col-lg-3">
            <!--Ряд, блок с классом row-->
            <div class="row">
              <!--Адаптивный блок 1-->
              <div class="col-sm-6 col-md-12">
                <!--Содержимое-->
              </div>
              <!--Адаптивный блок 2-->
              <div class="col-sm-6 col-md-12">
                <!--Содержимое-->
              </div>
            </div>
          </aside>        
        </main>
        <div class="row">
          <!--Футер-->
          <footer class="col-sm-12">
            <!--Содержимое-->
          </footer>
        </div>
      </div>
    </body>
    
  3. Этот способ отличается от предыдущих тем, что все блоки помещены в один ряд (блок с классом row):
    <body>
      <div class="container">
        <div class="row">
          <!--Шапка-->
          <header class="col-sm-12">
            <!--Содержимое-->
          </header>
          <!--Адаптивный блок article-->
          <article class="col-sm-12 col-md-8 col-lg-9">
            <!--Содержимое-->
          </article>
          <!--Адаптивный блок aside-->
          <aside class="col-sm-12 col-md-4 col-lg-3">
            <!--Ряд, блок с классом row-->
            <div class="row">
              <!--Адаптивный блок 1-->
              <div class="col-sm-6 col-md-12">
                <!--Содержимое-->
              </div>
              <!--Адаптивный блок 2-->
              <div class="col-sm-6 col-md-12">
                <!--Содержимое-->
              </div>
            </div>
          </aside>        
          <div class="clearfix"></div>
          <!--Футер-->
          <footer class="col-xs-12">
            <!--Содержимое-->
          </footer>
        </div>
      </div>
    </body>
    


   Bootstrap 0    37771 +1

Комментарии (22)

  1. Дамир # 0
    А для чего нужен файл «bootstrap-theme.min.css», и без него вроде всё нормально работает?
    1. Александр Мальцев # 0
      bootstrap-theme.css — это дополнительный файл CSS, который не обязательно использовать. Там содержатся стили для придания 3D эффектов кнопкам и некоторым другим компонентам платформы Twitter Bootstrap 3. Файл bootstrap-theme.min.css — это его минимизированная (сжатая) версия.
    2. Лора # 0
      Вот такенное Вам спасибо за наглядный и такой наиподробнейший урок!!!
      1. Гаджимурад # 0
        Спасибо большое за доходчивое объяснение
        1. Dimas # 0
          Вариант 2 альтернативной разметки. Первый блок в секции aside принимает цвет от блока header без возможности его изменения. В чем причина такого поведения? (Bootstrap 3.3.5)
          1. Dimas # 0
            ууупс) все нормально не досмотрел
          2. Егор # 0
            Здравствуйте, а как можно увеличить ширину 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. Анатолий # 0
              /* дополнительные медиа запросы */
              @media (min-width: 1300px) {
              	.container {
              		width: 1240px;
              	}
              }
              @media (min-width: 1400px) {
              	.container {
              		width: 1340px;
              	}
              }
              
            2. Егор # 0
              поправка

              style="max-width="1400px;
              1. GLOBALNET # 0
                style="max-width:1400px;
                1. Владислав # 0
                  style=«max-width:1400px»
              2. Бутко Александр # 0
                Очень ценный урок. Можно даже сказать, уникальный по своей простоте и понятности. Спасибо.
                1. Bob # 0
                  Спасибо! Всё очень интересно и познавательно. Вопрос такой… А как приручить IE8? Демо макета показывает в один столбец и цвет article белый.
                  1. Александр Мальцев # 0
                    Добавить в раздел 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 # 0
                      Теперь всё отлично!
                  2. Sergey # 0
                    Спасибо за статью, всё доступно и понятно.
                    1. Евгений # 0
                      Александр, спасибо за статью. У меня такой вопрос: можно ли реализовать макет, который растягивается только на больших и средних экранах, а при ширине например 960px и меньше фиксируется и появляется скрол.
                      1. Александр Мальцев # 0
                        Конечно можно.
                        Добавить в CSS стиль:
                        .container, .container-fluid {
                          min-width: 960px !important;
                        }
                        
                      2. константин # 0
                        А как решить вопрос с прижатием футера? Для проверки нажать ctrl — и довести хотя бы до 50% то можно увидеть что футер оторван от низа браузера. Спасибо
                        1. Александр Мальцев # 0
                          Используйте следующую структуру страницы.
                          В данном примере футер прижат к низу страницы и его высота составляет 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. Дмитрий # 0
                          Автор привет! Спасибо, все изложено отлично! Подскажи, а в какой программе визуально рисовал слои?
                          1. Александр Мальцев # 0
                            Можно в любой программе, в которой есть векторный редактор. Точно не помню, это был LibreOffice или Word.

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