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

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

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

Главная Инструкции Bootstrap Bootstrap 3 - Что такое адаптивная разметка

Bootstrap 3 - Что такое адаптивная разметка

В этой статье мы рассмотрим, какие бывают виды разметок и почему в последнее время все больше и больше сайтов имеют макет, построенный именно на основе адаптивной разметки.

Платформа Twitter Bootstrap 3 в основном предназначена для создания адаптивной разметки веб-страниц.

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

Фиксированная разметка - это разметка, которая имеет строго заданную ширину в пикселях. Она широко использовалась для разработки сайтов в прошлом, когда компьютеры и интернет только начали внедряться в нашу жизнь. В то время господствовали компьютеры с мониторами, имеющими диагональ 14" или 15", в редких случаях встречались "монстры", имеющие диагональ 17". Эти мониторы не сильно отличались по горизонтальному разрешению. Таким образом, выбрав для разметки какую-то определённую ширину, можно было разработать сайт, который хорошо бы отображался на всех мониторах того времени.

Фиксированная разметка

Резиновая (гибкая) разметка - это разметка, которая изменяется в зависимости от ширины рабочей области окна (вкладки) браузера. Потребность в такой разметке возникла, когда у многих пользователей появились мониторы, имеющие диагональ 19", 21" и больше. В это время сложилась такая ситуация, когда у одних пользователей были маленькие мониторы, а у других средние и большие. Разрешения, которые были установлены на этих мониторах стали сильно отличаться, и уже трудно было создать макет с фиксированной шириной, который одновременно хорошо отображался бы как на маленьких мониторах, так и на больших. Выходом из этой ситуации послужила разметка, в которой блоки уже не имеют строго фиксированную ширину, а могут изменяться (как бы подстраиваться) в зависимости от ширины монитора.

Резиновая (гибкая) разметка

Адаптивная разметка - это разметка, которая может приспосабливаться под различные устройства (ширину рабочей области окна браузера). Т.е. на одних устройствах она имеет одну структуру, а на других устройствах другую.

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

  • на смартфонах и планшетах (устройствах с очень маленьким размером экрана) Вы можете настроить макет так, чтобы блоки в нём располагались вертикально, т.е. один под другим.
  • на ноутбуках (устройствах со средним размером экрана) Вы можете настроить макет другим образом, т.е. так чтобы блоки в нём располагались горизонтально (1 блок - 33.3%, 2 блок - 66.7%).
  • на компьютерах (устройствах с большим размером экрана) Вы можете настроить макет как на ноутбуках, но отличающийся от него шириной, которые занимают блоки (1 блок - 25%, 2 блок - 75%).

Bootstrap 3 - Адаптивная разметка

Потребность в адаптивной разметке возникла, когда появилось много различных классов электронных устройств, таких как смартфоны (размер экрана от 3" до 6"), планшеты (от 7" до 10"), ноутбуки (10" и выше), мониторы (19" и выше). Теперь даже резиновая (гибкая) разметка не могла помочь, т.к. она всё равно рассчитана на определённый диапазон, в пределах которого сайт отображается хорошо. Чтобы было понятно, давайте представим, как выглядела бы наша резиновая разметка на смартфоне, имеющем горизонтальное разрешение 320рх. В первом варианте: 1 блок — 300рх, 2 блок - 20рх. Теперь давайте рассмотрим 2 вариант: 1 блок - 80рх, 2 блок - 240рх. Отсюда сделать можно только один вывод, такой сайт просматривать будет невозможно.

Для создания адаптивной разметки в Twitter Bootstrap 3 предназначены различные классы, в которых используются устойчивые сочетания, состоящие из нескольких букв:

  • xs - ширина рабочей области окна браузера меньше 768рх (характерен для устройств, имеющих очень маленький размер экрана);
  • sm - ширина рабочей области окна браузера больше или равно 768рх и меньше 992рх (характерен для устройств, имеющих маленький размер экрана);
  • md - ширина рабочей области окна браузера больше или равно 992рх и меньше 1200рх (характерен для устройств, имеющих средний размер экрана);
  • lg - ширина рабочей области окна браузера больше или равно 1200рх (характерен для устройств, имеющих большой размер экрана).

Bootstrap 3 - Основные классы устройств

Например:

  • класс col-md-3 будет использоваться только в том случае, если ширина рабочей области окна браузера будет находиться в диапазоне характерным для md.
  • класс visible-sm-block будет использоваться только в том случае, если ширина рабочей области окна браузера будет находиться в диапазоне характерным для sm.

Рассмотрим создание адаптивного макета, состоящего из 6 блоков.

    • На устройствах имеющих очень маленький размер экрана (xs) каждый блок должен располагаться с новой строки и занимать всю ширину родительcкого контейнера (т.е. 12 колонок Bootstrap).

      Bootstrap 3 - Расположение блоков на устройстве xs

<div class="col-xs-12">Блок №1</div>
<div class="col-xs-12">Блок №2</div>
<div class="col-xs-12">Блок №3</div>
<div class="col-xs-12">Блок №4</div>
<div class="col-xs-12">Блок №5</div>
<div class="col-xs-12">Блок №6</div>

 

  • На устройствах имеющих маленький размер экрана (sm) блоки должны располагаться на 3 строках по 2 блока в каждой строке. Каждый блок должен иметь ширину, равную 6 колонкам Bootstrap (т.е. 50% от ширины родительского контейнера).

Bootstrap 3 - Расположение блоков на устройстве sm

 

<div class="col-xs-12 col-sm-6">Блок №1</div>
<div class="col-xs-12 col-sm-6">Блок №2</div>
<div class="col-xs-12 col-sm-6">Блок №3</div>
<div class="col-xs-12 col-sm-6">Блок №4</div>
<div class="col-xs-12 col-sm-6">Блок №5</div>
<div class="col-xs-12 col-sm-6">Блок №6</div>

 

  • На устройствах имеющих средний размер экрана (md) блоки должны располагаться на 2 строках по 3 блока в каждой строке. Каждый блок должен иметь ширину, равную 4 колонкам Bootstrap (т.е. 33.3% от ширины родительского контейнера).

Bootstrap 3 - Расположение блоков на устройстве md

 

<div class="col-xs-12 col-sm-6 col-md-4">Блок №1</div>
<div class="col-xs-12 col-sm-6 col-md-4">Блок №2</div>
<div class="col-xs-12 col-sm-6 col-md-4">Блок №3</div>
<div class="col-xs-12 col-sm-6 col-md-4">Блок №4</div>
<div class="col-xs-12 col-sm-6 col-md-4">Блок №5</div>
<div class="col-xs-12 col-sm-6 col-md-4">Блок №6</div>

На устройствах имеющих большой размер экрана (lg) данные блоки должны располагаться в одной строчке. Каждый блок должен иметь ширину равную 2 колонкам Bootstrap (т.е. 16.7% от ширины родительского контейнера).

Bootstrap 3 - Расположение блоков на устройстве lg

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №1</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №3</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №4</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №5</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №6</div>

 

  • Поместим созданные адаптивные блоки в ряд (блок div с class="row"), а ряд поместим в контейнер (блок div class="container-fluid")

 

Bootstrap 3 - Порядок расположение блоков

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №1</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №2</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №3</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №4</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №5</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №6</div>
  </div>
</div>

 

    • Если наш макет наполнить данными, то высота адаптивных блоков измениться. Это может привести к тому что некоторые блоки могут оказаться не на своих местах (происходит это из-за того, что адаптивные блоки являются плавающими).
      Чтобы в нашем макете каждый блок всегда оставался на своём месте необходимо перед каждым блоком, который должен начинаться с новой строки на определённом устройстве (xssmmd и lg), помещать пустой блок div с классами clearfix иvisible-*-block (* - тип устройства).

Bootstrap 3 - Использование класса clearfix

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №1</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №2</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №3</div>
    <!--Перед блоком md, который должен начинаться с новой строки-->
    <div class="clearfix visible-md-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №4</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №5</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Блок №6</div>
  </div>
</div>

 

Наш код можно упростить, убрав col-xs-12, т.к. адаптивные блоки в xs имеют такую ширину по умолчанию :

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-2">Блок №1</div>
    <div class="col-sm-6 col-md-4 col-lg-2">Блок №2</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-2">Блок №3</div>
    <!--Перед блоком md, который должен начинаться с новой строки-->
    <div class="clearfix visible-md-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-2">Блок №4</div>
    <!--Перед блоком sm, который должен начинаться с новой строки-->
    <div class="clearfix visible-sm-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-2">Блок №5</div>
    <div class="col-sm-6 col-md-4 col-lg-2">Блок №6</div>
  </div>
</div>

Вопросы и задание:

  1. Чем отличается адаптивная разметка от фиксированной и резиновой?
  2. Как узнать, для какого устройства предназначен тот или иной класс Twitter Bootstrap 3?
  3. Измените, рассмотренный пример таким образом, чтобы разметка на lg была точно такой же, как и на md.