Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная Инструкции Bootstrap Bootstrap 3 - Адаптивно-фиксированный макет сайта

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

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

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

  • адаптивно-фиксированный макет - это адаптивный макет, имеющий фиксированную ширину, которая остаётся постоянной только в пределах некоторого диапазона, характерного для xssmmd или lg.
  • адаптивно-резиновый (гибкий) макет - это адаптивный макет, имеющий резиновую (плавающую) ширину. Т.е. он (адаптивно-резиновый макет) на любых устройствах (xssmmd и lg) занимает всю доступную ширину (100%) рабочей области окна (вкладки) браузера.
  • создать элемент div с классом container. Данный элемент будет служить контейнером, в который мы будем помещать остальные элементы.
  • создать внутри контейнера элемент div с классом row. Данный элемент будем называть строкой или рядом. Он предназначен для того, чтобы в него помещать адаптивные блоки.
  • создать внутри ряда (блок div с классом row) адаптивные блоки. Адаптивные блоки - это элементы div с классами col-xs-*,col-sm-*col-md-*col-lg-* (* - это число от 1 до 12, которое определяет его ширину на определенном устройстве). Они называются адаптивными, потому что они могут иметь разную ширину на разных устройствах. Данные блоки являются основными кирпичиками, с помощью которых строится адаптивный макет веб-страницы.
    Например:
    1. <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" будет иметь следующую ширину: на lgmd и на xs - 12 колонок Bootstrap, sm - 6 колонок Bootstrap.

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

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

 

6. Упростим код разметки. Для этого в код внесём следующие изменения:

  • Классы 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>