Советы по разработке адаптивного дизайна на 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) { ... }.
Этот вид классификации применяется большинством адаптивных фреймворков.
Подробное рассмотрение системы сеток
Если вы знакомы с системой сеток 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 предотвращает соприкосновение контента внутри элемента с краями окна браузера, используя поле в 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. Если вы заметили еще что-то в его исходном коде, напишите об этом в комментариях.