Советы по разработке адаптивного дизайна на Bootstrap

С релизом версии 3, Bootstrap добавил к своей адаптивной базе еще и возможность создания проектов mobile first.

Какие элементы, включенные в CSS Bootstrap, помогают в этом? Давайте рассмотрим несколько вещей и получим некоторое представление о том, как они могут помочь нам в наших проектах.

Определение надлежащих медиа запросов

Bootstrap имеет четко определенные контрольные точки для различных видов устройств, указываемые с помощью медиа запросов CSS.

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

  • Сверхмалые устройства (например, мобильные телефоны) определяются по умолчанию при разработке «mobile first» концепции Bootstrap. К ним относятся устройства, имеющие ширину экрана меньше, чем 768 пикселей;
  • Малые устройства (например, планшеты), определяются с помощью @media (min-width: 768px) and (max-width: 991px) { … };
  • Средние устройства (например, мониторы) имеют ширину экрана меньше, чем 1200 пикселей, но больше, чем 991 пиксель, определяются с помощью @media (min-width: 992px) and (max-width: 1199px) { … };
  • Большие устройства (например, широкоформатные мониторы) с шириной больше, чем 1200 пикселей, определяются с помощью @media (min-width: 1200px) { … }.

Примечание: Мобильные устройства, которые мы используем сегодня, могут иметь две разных ориентации экрана: портретную и альбомную. Поэтому приведенные выше критерии применяются для альбомной ориентации. Например, если вы используете смартфон Samsung Galaxy Note III, альбомная ориентация попадает в категорию "Малые устройства", в то время как портретный режим подпадает под определение "Сверхмалые устройства".


Этот вид классификации применяется большинством адаптивных фреймворков.

Подробное рассмотрение системы сеток

Если вы знакомы с системой сеток Bootstrap, вы, возможно, знаете, что для корректной настройки сетки требуется соответствующая HTML-структура. Давайте рассмотрим ее.

Давайте сначала рассмотрим HTML-структуру Bootstrap для установки двух столбцов:

<div class="container">
  <div class="row">

    <div class="col-xs-6">
      <p>Столбец 1</p>
    </div>

    <div class="col-xs-6">
      <p>Столбец 2</p>
    </div>

  </div>
</div>

Как показано выше, система сетки Bootstrap начинается с элемента контейнера. Контейнеры определяют, какое пространство должна использовать система сетки. Они могут быть двух типов: .container имеет разную ширину для различных типов устройств, в то время как .container-fluid занимает всю ширину экрана.

С помощью медиа запросов Bootstrap задает для .container разную ширину, в зависимости от размера устройства:

  • Сверхмалые устройства (меньше 768 пикселей): width: auto (или ширина не задается);
  • Малые устройства (больше или равно 768 пикселей): width: 750px;
  • Средние устройства (больше или равно 992 пикселей): width: 970px;
  • Более крупные устройства (больше или равно 1200 пикселей): width: 1170px.
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
container предотвращает соприкосновение контента

Как видно из приведенного выше изображения, .container предотвращает соприкосновение контента внутри элемента с краями окна браузера, используя поле в 15 пикселей с каждой стороны. Это также гарантирует, размещение контейнера по центру с помощью использования значения auto для левого и правого отступов.

Строки являются еще одним важным элементом системы сетки Bootstrap. Прежде чем создавать столбцы, вы можете определить строку, используя класс .row. Вот фрагмент CSS-кода Bootstrap для класса .row:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Как видим, наша строка имеет отрицательное значение правого и левого полей -15 пикселей, чтобы края строки касались края элемента контейнера. Это действует как оболочка для столбцов, куда вы можете добавить до 12 столбцов:

строка имеет отрицательное значение правого и левого полей

Строка Bootstrap

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

Вот фрагмент CSS-кода Bootstrap для класса .col-xs-6:

.col-xs-6 {
  padding-right: 15px;
  padding-left: 15px;
}

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

приведенный ниже рисунок

Благодаря отрицательным полям строк, столбцы касаются края строк и края контейнера. Но поля столбцов обеспечивают, чтобы контент отступал от края контейнера на те же 15 пикселей.

Контейнеры используются и для других целей, не только для системы сетки, чтобы обеспечить отступ контента от края окна браузера на 15 пикселей (при использовании .container-fluid). Строки имеют отрицательные поля, чтобы нивелировать влияние полей контейнера.

Если вы хотите создать собственный фреймворк, вы, возможно, захотите рассмотреть использование метода поля / отступы.

Определение правильной ширины столбцов

Bootstrap использует проценты (%) в качестве единицы для определения ширины столбцов, что помогает создавать адаптивные конструкции. Как было сказано выше, в нем существует 4 различных категории устройств для различных контрольных точек.

Каждая категория имеет свой собственный набор классов для столбцов разных размеров:

  • Сверхмалые устройства используют .col-xs-*;
  • Малые устройства используют .col-sm-*;
  • Средние устройства используют .col-md-*;
  • Большие устройства используют .col-lg-*.

Символ звездочки (*) заменяется на число. Например, .col-xs-6 6 раз создает столбец размера .col-xs-1; .col-xs-4 четыре раза создает столбец размера .col-xs-1 и так далее.

По умолчанию, для всех столбцов не задана ширина. Тем не менее, в медиа запросах Bootstrap задает значения ширины для каждого класса столбцов.

Вот фрагмент из CSS-кода Bootstrap для классов столбцов, где звездочками для краткости заменены размеры (xs, sm, md и т.д.):

.col-*-12 {
  width: 100%;
}

.col-*-11 {
  width: 91.66666667%;
}

.col-*-10 {
  width: 83.33333333%;
}

.col-*-9 {
  width: 75%;
}

.col-*-8 {
  width: 66.66666667%;
}

.col-*-7 {
  width: 58.33333333%;
}

.col-*-6 {
  width: 50%;
}

.col-*-5 {
  width: 41.66666667%;
}

.col-*-4 {
  width: 33.33333333%;
}

.col-*-3 {
  width: 25%;
}

.col-*-2 {
  width: 16.66666667%;
}

.col-*-1 {
  width: 8.33333333%;
}

Давайте проанализируем этот код. Класс .col-lg-6 будет иметь ширину в 50% на больших устройствах, но для средних, малых и сверхмалых устройств, используется ширина по умолчанию width: auto. Это обеспечивает то, что столбцы преобразуются в общей структуре (а не бок о бок) на небольших устройствах.

Адаптивные таблицы

Таблицы, используемые для отображения данных, также адаптивны в Bootstrap.
Для использования стилей таблиц Bootstrap мы используем класс .table, которому соответствует следующий CSS-код:

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

Применяя ширину в 100%, Bootstrap обеспечивает заполнение таблицами всей ширины родительского элемента. Но есть одна проблема. Таблицы с несколькими столбцами сжимаются на небольших устройствах, и могут не читаться.
Чтобы исправить это, Bootstrap содержит другой класс .table-responsive. Вот его CSS-код:

.table-responsive {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 1px solid #ddd;
}

Эти стили преобразуют столбцы таблицы в горизонтально прокручиваемые на небольших устройствах.

Адаптивные изображения

Большие изображения могут стать проблемой для небольших устройств. Bootstrap использует класс .img, что сделать любое изображение адаптивным:

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

Комбинация объявлений max-width: 100% и height: auto обеспечивает то, что изображения пропорционально уменьшаются на небольших устройствах, оставаясь в рамках ограничений родительского элемента на больших устройствах.

Заключение

Эти всего лишь несколько советов по адаптивному веб-дизайну, которые я взял из Bootstrap 3. Если вы заметили еще что-то в его исходном коде, напишите об этом в комментариях.

Перевод статьи «Responsive Web Design Tips from Bootstrap’s CSS» был подготовлен дружной командой проекта Сайтостроение от А до Я.