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) каждый блок должен располагаться с новой строки и занимать всю ширину родительского контейнера (т.е. 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>
    
  • Если наш макет наполнить данными, то высота адаптивных блоков измениться. Это может привести к тому что некоторые блоки могут оказаться не на своих местах (происходит это из-за того, что адаптивные блоки являются плавающими).
    Чтобы в нашем макете каждый блок всегда оставался на своём месте необходимо перед каждым блоком, который должен начинаться с новой строки на определённом устройстве (xs, sm, md и 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.


   Bootstrap 1    16735 +2

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

  1. Сергей # 0
    Замеченные опечатки:
    — sm — ширина рабочей области окна браузера больше 768рх и меньше 1024рх — должно быть меньше 992px;
    — На устройствах имеющих маленький размер экрана (sm) блоки должны располагаться на 2 строках по 3 блока в каждой строке. Каждый блок должен иметь ширину, равную 4 колонкам Bootstrap (т.е. 33.3% от ширины родительского контейнера) — должно быть на 3 строках по 2 блока, равную 6 колонкам, 50%;
    — На устройствах имеющих средний размер экрана (md) блоки должны располагаться на 3 строках по 2 блока в каждой строке — должно быть на 2 строках по 3 блока
    1. Александр Мальцев # 0
      Сергей, спасибо за замеченные опечатки.
    2. Владимир # 0
      Как влияет на оптимизацию (CEO) дублирование контента, которое получается из-за использования visible или hidden? Может получиться, что в одном коде 2 одинаковых меню, 2 логотипа… и всего по 2?
      1. Александр Мальцев # 0
        Здравствуйте!
        Владимир, зачем в такие крайности впадать. Все сайты без исключения используют скрытые блоки, даже Google и Yandex. Поисковые роботы в настоящее время очень умные механизмы и умеют понимать скрытый этот контент или нет. Если Вы конечно не будете скрывать что-то не хорошее в этих блоках… А вот если Вы потратите время и сделаете Ваш сайт адаптивным, то это может реально увеличить поведенческие характеристики Вашего сайта, а это уже реальный + и повешение позиций в поисковой выдаче.

        В первую очередь в SEO оптимизации не стоит забывать о посетителях Вашего сайта и делать так чтобы хорошо было им. Поисковые роботы в первую очередь оценивают это… а не то что у Вас 2 похожих логотипа…
      2. Dmitriy # 0
        А есть какие нибудь правила верстки внутри div с классом col-…? Например нормально внутри него делать еще один row, да еще и с отступом margin?
        1. Александр Мальцев # 0
          Если его Вам необходимо разбить ещё на блоки, то все действия повторяются. Блок div с классом row — это обертка для блоков с колонками (col-...). Т.е. если некоторый блок, Вы хотите ещё разбить на блоки, используя сетку Bootstrap, то их необходимо обернуть в блок с классом row.
          <!--Некоторый блок, который необходимо разметить, используя сетку Bootstrap-->
          <div>
            <div class="row"> <!--создаёте блок с классом row-->
              <div class="col-md-6"> <!--создаём блок с шириной 50% на md и lg-->
                ...
              </div>
              <div class="col-md-6"> <!--создаём блок с шириной 50% на md и lg-->
                ...
              </div>
            </div>
          </div>
          
          Блок с классом .row просто компенсирует padding от блоков container и col-…
          Т.е. если у Вас будет такая структура, то в 4 блоке суммарный padding будет уже 60px.
          container(+15)->col(+15)->col(+15)->col(+15)
          А должно быть 15px, т.е. так:
          container(+15)->row(-15)->col(+15)->row(-15)->col(+15)->row(-15)->col(+15)
          1. Dmitriy # 0
            Спасибо большое
        2. Стас # 0
          подскажите пожалуйста. на сколько корректна вот аткая запись.

          <div>
            <div class="row"> 
              <div class="col-md-6"> 
                <div class="col-md-6"> 
                  здесь половина от половины, те. 1/4?
                </div>	
                <div class="col-md-6"> 
                  1
                </div>	
              </div>
              <div class="col-md-6"> 
                ...
              </div>
            </div>
          </div>
          1. Александр Мальцев # 0
            Адаптивные блоки необходимо заключать в блок с классом row.
            <div>
              <div class="row"> 
                <div class="col-md-6">
                  <div class="row"> 
                    <div class="col-md-6"> 
                      здесь половина от половины, те. 1/4?
                    </div>	
                    <div class="col-md-6"> 
                      1
                    </div>	
                  </div>
                </div>
                <div class="col-md-6"> 
                  ...
                </div>
              </div>
            </div>
            

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