Адаптивность — неотъемлемая часть любого современного сайта. Со многими концепциями адаптивности вы познакомились в курсе CSS: Адаптивность сайта. Теперь эти знания помогут быстро понять то, как работает Bootstrap.
В своей основе Bootstrap использует подход Mobile First. Это означает, что вначале указывается код для мобильных устройств, а потом код для десктопа. Возникает вопрос: «А причем тут Mobile First, если необходимо только использовать нужные классы?». Ответ на данный вопрос кроется в том, с какими разрешениями экрана работает Bootstrap. Таких разрешений в последней версии пять:
-
Extra small. Ширина viewport меньше 576px. Внутри Bootstrap такое разрешение никак не маркируется. Данный тип является значением по умолчанию. Ширина
.container: 100% -
Small. Ширина viewport больше или равна 576px. Внутри Bootstrap такое разрешение маркируется как -sm-. Ширина
.container: 540px -
Medium. Ширина viewport больше или равна 768px. Внутри Bootstrap такое разрешение маркируется как -md-. Ширина
.container: 720px -
Large. Ширина viewport больше или равна 992px. Внутри Bootstrap такое разрешение маркируется как -lg-. Ширина
.container: 960px -
Extra large. Ширина viewport больше или равна 1200px. Внутри Bootstrap такое разрешение маркируется как -xl-. Ширина
.container: 1140px
| Префикс | Ширина viewport | Ширина container |
|---|---|---|
|
>=576px |
540px |
|
>=768px |
720px |
|
>=992px |
960px |
|
>=1200px |
1140px |
Эти префиксы, которые есть у разрешений, используются внутри сеток и утилит. Утилиты будут изучены в одном из следующих уроков.
Важно: используя данные префиксы важно помнить о подходе Mobile First. В этом подходе префиксы влияют на стили только для определенных ширин viewport’а и более. Например, классы с префиксом -md- не будут использоваться при разрешении менее 768px.
Используем изученные префиксы на колонках. К каждой из них можно добавить нужный префикс, тем самым добиваясь различного отображения на разных разрешениях экрана.
<div class="container">
<div class="row">
<aside class="col-12 col-md-3 col-lg-2">
<!-- Боковая панель -->
</aside>
<main class="col">
<!-- Основной контент -->
</main>
</div>
</div>В этом примере боковая панель работает по следующему алгоритму:
-
При ширине менее 768px панель занимает всю доступную ширину viewport. За это отвечает класс .col-12
-
При ширине от 768px до 992px панель занимает 3 из 12 колонок в сетке. За это отвечает класс .col-md-3
-
При ширине от 992px панель занимает 2 из 12 колонок в сетке. За это отвечает класс .col-lg-2
Перейдите на сайт Codepen, чтобы полноценно увидеть результат. Измените колонки так, как хочется.
row-cols-*
Начиная с версии Bootstrap 4.4 появились новые классы для создания колонок. Такими классами стали .row-cols-*, где * — значение от 1 до 6. Что же в них такого интересного? Они позволяют на уровне row задать количество колонок при использовании класса .col у дочерних элементов. Это полезно для создания секции однотипных элементов, которые имеют одинаковую ширину. Такими элементами могут являться карточки товара.
Как и у классов .col-*, классы вида .row-cols-* имеют префиксы, изученные в этом уроке. Их назначение и принцип работы ничем не отличается. Для примера создадим небольшой каталог, который:
-
При ширине больше 992px расставляет по 6 карточек в ряд
-
При ширине от 768px до 992px расставляет по 4 карточки в ряд
-
При ширине от 576px до 768px расставляет по 2 карточки в ряд
-
При ширине меньше 576px расставляет по 1 карточке в ряд
При таком количестве условий решение задачи сводится всего к добавлению пары классов на уровень row.
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 row-cols-lg-6">
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
<article class="col"><!-- Верстка карточки --></article>
</div>
</div>Как и в прошлом примере, изменяйте значения, чтобы увидеть, как изменение всего одного класса влияет на верстку в целом.
Важно: при использовании классов вида .row-cols-* значения .col-* у элементов игнорируется. Управление по размещению карточек есть только на уровне row
Самостоятельная работа
В самостоятельном проекте создайте сетку для каталога товаров.
-
На мобильном разрешении (sm и меньше) карточка занимает всю ширину
-
На разрешении от md: 3 карточки в строке
-
На разрешении от lg: 5 карточек в строке
-
На разрешении от xl: 6 карточек в строке
Вы можете выбрать любой из способов создания адаптивной сетки
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
