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

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

Фреймворк Bootstrap включает в себя все необходимые инструменты, с помощью которых можно создать адаптивный макет сайта. В эти инструменты входят обёрточные контейнеры, мощная система сеток и отзывчивые служебные классы.

Обёрточные контейнеры

Обёрточный контейнер - это основной элемент адаптивного макета в Bootstrap. Именного с него начинается вёрстка всей страницы или самостоятельных её частей (например, шапки, основного меню, основной области или футера) в зависимости от стратегии разработки.

Контейнер в Bootstrap бывает адаптивно-фиксированным (<div class="container">...</div>) или адаптивно-резиновым (<div class="container-fluid">...</div>).

Первый (адаптивно-фиксированный контейнер) характеризуется тем, что он имеет постоянную ширину. Но эта фиксированная ширина является адаптивной, т.е. она меняется в зависимости от того, какой viewport (ширину области просмотра) имеет браузер.

В следующей таблице приведены соответствие ширины области просмотра (viewport) браузера ширине адаптивно-фиксированного контейнера Bootstrap:

Ширина контейнера (container) Ширина рабочей области окна браузера
Ширина контейнера = ширине viewport <768px
750px >= 768px и <992px
970px >= 992px и <1200px
1170px <=1200px

Кроме установления ширины адаптивно-фиксированный контейнер Bootstrap ещё центрирует себя в горизонтальном направлении относительно краёв страницы. Выполняет это он с помощью CSS свойств margin-left:auto и margin-right:auto. Кроме этого, адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх (с помощью CSS свойств padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.

Адаптивно-фиксированный контейнер Bootstrap
Адаптивно-фиксированный контейнер Bootstrap
<div class="container">
  ...
</div>

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

<div class="container-fluid">
  ...
</div>
Адаптивно-резиновый контейнер Bootstrap
Адаптивно-резиновый контейнер Bootstrap

Обратите внимание: При разработке макетов страниц сайтов обычно не применяют вкладывание одних обёрточных контейнеров Bootstrap в другие.

Система сеток Bootstrap

Сетка Bootstrap - это список предопределённых классов, с помощью которых можно задать поведение необходимым блокам (HTML элементам) и построить с помощью них нужный макет сайта.

Кроме обёрточных контейнеров, предназначенных для задания основной области содержимого, в системе сеток фреймворка Bootstrap имеются ещё 2 других элемента. Это ряды (блоки div с классом row) и адаптивные блоки (блоки div с классом col-?-?). Ряд - это специальный блок, который применяется только для оборачивания адаптивных блоков. Его основное назначение - это нейтрализация положительного внутреннего отступа (+15px слева и справа) обёрточного контейнера или адаптивного блока.

Bootstrap - ряд, расположенный внутри адаптивно-фиксированного контейнера
Bootstrap - ряд, расположенный внутри адаптивно-фиксированного контейнера

Например (внутренние отступы):

container (+15px) -> row (-15px) -> col (+15px) -> контент
container (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент

Т.е. вышеприведённый пример показывает, что независимо от того в каком адаптивном блоке находится контент, он всегда будет иметь правильный отступ от края контейнера (т.е. 15px слева и справа).


Адаптивный блок Bootstrap
Адаптивный блок Bootstrap

Адаптивные блоки Bootstrap - это элементы, которым установлены один или несколько классов col-?-?. Данные блоки являются основными строительными кирпичиками макета, именно они позволяют создавать необходимую структуру страницы.

Ширина, которую будет иметь адаптивный блок, задаётся в связке с типом устройства. Это позволяет установить блоку на каждом устройстве разную ширину.

Ширина адаптивного блока на определённом типе устройстве определяется по умолчанию числом от 1 до 12 (количеством колонок Bootstrap), которое указывается вместо второго знака ? в классе col-?-?. Например, число 1 - устанавливает адаптивному блоку ширину, равную 1/12 (8,3%) от ширины родительского блока. Число 12 - ширину, равную 12/12 (100%) от ширины родительского блока. Данная ширина (число от 1 до 12) – это просто процентное отношение от ширины родительского контейнера.

Как задаётся ширина адаптивного блока в Bootstrap
Как задаётся ширина адаптивного блока в Bootstrap

Кроме указания ширины адаптивному блоку необходимо ещё указать и класс устройства (вместо 1 вопроса). Класс устройства будет определять то, на каком viewport будет действовать эта ширина. В Bootstrap 3 различают 4 основных класса. Это xs, sm (ширина viewport >= 768px), md (ширина viewport >= 992px) и lg (ширина области просмотра браузера >=1200px).

Например, адаптивный блок с классом col-xs-12 col-sm-6 col-md-4 col-lg-3 будет иметь на устройстве xs ширину 100% (12/12), на sm - 50% (6/12), на md - 33,3% (4/12), на lg - 25% (3/12).

Кроме этого следует обратить внимание на то, что адаптивные блоки не ограничивают свой диапазон. Т.е. если вы в атрибуте class адаптивного блока указали xs, но не указали sm, то его действие распространиться и на область действия этого диапазона.

Например, адаптивный блок с классом col-xs-6 col-lg-3 будет иметь на устройствах xs, sm и md ширину 50% (6/12), на lg - 25% (3/12).

Адаптивный блок, также как и контейнер, имеет положительные отступы слева и справа по 15px для контента, который в него будет помещён.

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

Например, разобьём блок на 3 равные колонки, которые на xs будут отображаться вертикально, а на sm и выше горизонтально:

<div class="row">
  <div class="col-xs-12 col-sm-4">...</div>
  <div class="col-xs-12 col-sm-4">...</div> 
  <div class="col-xs-12 col-sm-4">...</div> 
</div>

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

Например, возьмём простую разметку:

<div class="container">  
  <div class="row">
    <div class="col-xs-12 col-md-8">1 блок...</div>
    <div class="col-xs-12 col-md-4">2 блок...</div> 
  </div>
</div>
Контрольные точки (viewport) ширина контента 1 блока ширина контента 2 блока
320px 320px - padding (30px) = 290px 320px - padding (30px) = 290px
750px 750px - padding (30px) = 720px 750px - padding (30px) = 720px
970px 970px*8/12 - padding (30px) = 616,7px 970px*4/12 - padding (30px) = 293,3px
1170px 1170px*8/12 - padding (30px) = 750px 1170px*4/12 - padding (30px) = 360px

Расположение адаптивных блоков в родительском элементе

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

Как располагаются адаптивные блоки?
Расположение адаптивных блоков в родительском элементе

В Bootstrap 3 адаптивные блоки являются плавающими (float:left). Это необходимо учитывать при создании макета веб-страницы.

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

Например, если в вышеприведённом примере высота 1 блока будет выше, чем 2 блока. То 3 блок будет располагаться не на новой строчке, а "прилипнет" к правой стороне 1 блока.

Особенности float блоков
Особенности float блоков

Чтобы этого не допустить, необходимо добавить блок с классом clearfix и сделать его видимым для необходимых устройств (на которых эта разметка действует, например, на md и lg):

<div class="row">
  <div class="col-xs-12 col-md-4">1 блок...</div>
  <div class="col-xs-12 col-md-6">2 блок...</div>
  <div class="clearfix hidden-xs hidden-sm"></div>     
  <div class="col-xs-12 col-md-5">3 блок...</div>
</div>

Как вкладывать колонки

Создание разметки в Bootstrap - это процесс вкладывания одних адаптивных блоков в другие. При этом их ширина - это всегда относительный параметр, который задаётся в процентном отношении (количеством колонок) от ширины родительского блока. Т.е. на любом уровне вложенности, например, ширина адаптивного блока в 6 колонок - это всегда 50% (6/12*100%) от ширины родительского элемента.

Например, разобьём некоторый блок на 4 блока (2 в первой строке и 2 - во второй). Для простоты, разметку на всех устройствах выполним одинаковую:

<div class="row">
  <div class="col-xs-6">1 блок...</div>
  <div class="col-xs-6">2 блок...</div>
  <div class="clearfix"></div>     
  <div class="col-xs-6">3 блок...</div>
  <div class="col-xs-6">4 блок...</div>
</div>

После этого, разметим 3 блок аналогично (2 на 2):

<div class="row">
  <div class="col-xs-6">1 блок...</div>
  <div class="col-xs-6">2 блок...</div>
  <div class="clearfix"></div>     
  <div class="col-xs-6">
    <div class="row">
      <div class="col-xs-6">3-1 блок...</div>
      <div class="col-xs-6">3-2 блок...</div>
      <div class="clearfix"></div>
      <div class="col-xs-6">3-3 блок...</div>
      <div class="col-xs-6">3-4 блок...</div>        
    </div>
  </div>
  <div class="col-xs-6">4 блок...</div>
</div>

Не трудно заметить, что разметка 3 блока выполнена аналогично, т.е. также как и основного блока. Другими словами, в Bootstrap размечать одни блоки необходимо также как и другие, не зависимо от того, какой блок куда вложен.

Классы для адаптивного смещения блоков

В Bootstrap имеются адаптивные классы (col-?-offset-?), с помощью которых вы можете сдвинуть блок на определённое количество колонок вправо. Первый ? необходимо заменить на тип устройства (xs, sm, md или lg). Второй ? на количество колонок.

Например, зададим блоку на md устройствах ширину 8 колонок и расположим его в строке по центру (т.е. сдвинем его на 2 колонки вправо):

<div class="row">
  <div class="col-xs-12 col-md-8 col-md-offset-2">1 блок...</div>
</div>

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

Отзывчивые служебные классы Bootstrap 3

Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства.

Кроме указания устройства (xs, sm, md, lg), на котором будет виден блок, необходимо ещё указать то, как он на этом устройстве должен отображаться. Возможные варианты: inline, block и inline-block.

Класс Описание
visible-xs-? Делает элемент видимым только на устройствах с очень маленьким экраном xs (ширина viewport <768px). На других устройствах эти элементы не видимы.
visible-sm-? Делает элемент видимым только на устройствах, имеющих экран sm (ширина viewport >=768px и <992px). На других устройствах эти элементы не видимы.
visible-md-? Делает элемент видимым лишь на устройствах, имеющих экран md (ширина viewport >=992px и <1200px). На других устройствах эти элементы не видимы.
visible-lg-? Делает элемент видимым только на устройствах, имеющих экран lg (ширина viewport >=1200px). На других устройствах эти элементы не видимы.

Вместо знака ? необходимо указать block, inline или inline-block. Т.е. указать, как данный элемент должен отображаться.

Например, добавление к элементу класса visible-md-block будет означать то, что он будет отображаться только на устройствах, имеющим viewport md (width viewport >=992px и <1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).

Примечание: Эти классы также можно использовать совместно для того, чтобы элементы были видны на нескольких устройствах. Например, если вы примените к элементу классы visible-xs-inline и visible-md-inline, то это сделает его видимым на устройствах, имеющих как маленький экран, так и средний. Отображаться данный элемент будет как строчный (CSS: display:inline;).

Кроме классов для отображения элементов, Bootstrap 3 содержит ещё и другие классы. С помощью них можно скрыть элементы на определенных устройствах.

Класс Описание
hidden-xs Скрывает элемент на устройствах xs (ширина viewport <768px).
hidden-sm Скрывает элемент на устройствах sm (ширина viewport >=768px и <992px).
hidden-md Скрывает элемент на устройствах md (ширина viewport >=992px и <1200px).
hidden-lg Скрывает элемент на устройствах lg (ширина viewport >=1200px).

Эти классы тоже можно использовать совместно, чтобы сделать элемент не видимым на нескольких устройствах.

Например, добавив к элементу классы hidden-xs и hidden-sm, вы сделаете его сразу не видимым на 2 устройствах (xs и sm).

Кроме вышеприведённых отзывчивых классов, фреймворк Bootstrap 3 ещё содержит и такие, которые позволяют управлять видимостью элементов при печати.

Класс Описание
visible-print-block Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение block.
visible-print-inline Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline.
visible-print-inline-block Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline-block.
hidden-print Элемент, имеющий указанный класс не будет отображаться при печати. На странице (в браузере) данный элемент будет виден.

Пример разметки блока с помощью сетки Bootstrap 3

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

Разметка блока с помощью сетки Bootstrap
Разметка блока с помощью сетки Bootstrap

Разрабатывать макет всегда начинают с xs. На данном устройстве блоки имеют одинаковую ширину (12 колонок Bootstrap).

<div class="row">
  <div class="col-xs-12">Контент блока 1...</div>
  <div class="col-xs-12">Контент блока 2...</div>
  <div class="col-xs-12">Контент блока 3...</div>
</div>

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

<div class="row">
  <div class="col-xs-12 col-sm-12">Контент блока 1...</div>
  <div class="col-xs-12 col-sm-6">Контент блока 2...</div>
  <div class="col-xs-12 col-sm-6">Контент блока 3...</div>
</div>
Макет блока для устройств md
Макет блока для устройств md

На md блоки 1 и 2 расположены на первой строке, а 3 блок - на 2 строке. 1 блок имеет ширину, равную 8 колонкам Bootstrap (col-md-8), 2 блок - 4 колонки (col-md-4). Т.к. третий блок должен всегда располагаться на 2 строке, то перед ним необходимо поместить дополнительный пустой блок с классом clearfix. Данный блок не позволит 3 блоку обтекать предыдущие, и он всегда будет располагаться на 2 стоке. Также необходимо иметь в виду, что это нужно сделать только для устройств md. Для этого необходимо к пустому блоку дополнительно добавить ещё класс visible-md-block.

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-8">Контент блока 1...</div>
  <div class="col-xs-12 col-sm-6 col-md-4">Контент блока 2...</div>
  <div class="clearfix visible-md-block"></div>  
  <div class="col-xs-12 col-sm-6 col-md-12">Контент блока 3...</div>
</div>
Разметка блока для устройств, имеющих большой viewport (lg)
Разметка блока для устройств, имеющих большой viewport

На lg адаптивные блоки расположены горизонтально и занимают вместе всю ширину. 1 блок имеет ширину равную половине ширины родительского элемента (col-lg-6), 2 блок - одну четвертую ширины (col-lg-3), и 3 блок - тоже должен занимать одну четвертую ширину родительского элемента (col-lg-3).

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">Контент блока 1...</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Контент блока 2...</div>
  <div class="clearfix visible-md-block"></div>  
  <div class="col-xs-12 col-sm-6 col-md-12 col-lg-3">Контент блока 3...</div>
</div>

Статьи, связанные с этой темой: