Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Адаптивность - неотъемлемая часть любого современного сайта. Разберемся как она работает в Bootstrap.

2 В своей основе Bootstrap использует подход Mobile First. Это означает, что вначале указывается код для мобильных устройств, а потом код для десктопа. Возникает вопрос: "А причем тут Mobile First, если необходимо только использовать нужные классы?". Ответ на данный вопрос кроется в том, с какими разрешениями экрана работает Bootstrap. Таких разрешений в последней версии пять:

3 <ul><li>Extra small. Ширина viewport меньше 576px. Внутри Bootstrap такое разрешение никак не маркируется. Данный тип является значением по умолчанию. Ширина .container: 100%</li>

4 <li>Small. Ширина viewport больше или равна 576px. Внутри Bootstrap такое разрешение маркируется как-sm-. Ширина .container: 540px</li>

5 <li>Medium. Ширина viewport больше или равна 768px. Внутри Bootstrap такое разрешение маркируется как-md-. Ширина .container: 720px</li>

6 <li>Large. Ширина viewport больше или равна 992px. Внутри Bootstrap такое разрешение маркируется как-lg-. Ширина .container: 960px</li>

7 <li>Extra large. Ширина viewport больше или равна 1200px. Внутри Bootstrap такое разрешение маркируется как-xl-. Ширина .container: 1140px</li>

8 </ul>Эти префиксы, которые есть у разрешений, используются внутри сеток и утилит. Утилиты будут изучены в одном из следующих уроков.

9 Важно:используя данные префиксы важно помнить о подходе Mobile First. В этом подходе префиксы влияют на стили только для определенных ширин viewport’а и более. Например, классы с префиксом-md-не будут использоваться при разрешении менее 768px.

10 Используем изученные префиксы на колонках. К каждой из них можно добавить нужный префикс, тем самым добиваясь различного отображения на разных разрешениях экрана.

11 В этом примере боковая панель работает по следующему алгоритму:

12 <ul><li>При ширине менее 768px панель занимает всю доступную ширину viewport. За это отвечает класс.col-12</li>

13 <li>При ширине от 768px до 992px панель занимает 3 из 12 колонок в сетке. За это отвечает класс.col-md-3</li>

14 <li>При ширине от 992px панель занимает 2 из 12 колонок в сетке. За это отвечает класс.col-lg-2</li>

15 </ul><a>Codepen</a>

16 Перейдите на сайт Codepen, чтобы полноценно увидеть результат. Измените колонки так, как хочется.

17 <h2>row-cols-*</h2>

18 Начиная с версии Bootstrap 4.4 появились новые классы для создания колонок. Такими классами стали.row-cols-*, где*- значение от 1 до 6. Что же в них такого интересного? Они позволяют на уровнеrowзадать количество колонок при использовании класса.colу дочерних элементов. Это полезно для создания секции однотипных элементов, которые имеют одинаковую ширину. Такими элементами могут являться карточки товара.

19 Как и у классов.col-*, классы вида.row-cols-*имеют префиксы, изученные в этом уроке. Их назначение и принцип работы ничем не отличается. Для примера создадим небольшой каталог, который:

20 <ul><li>При ширине больше 992px расставляет по 6 карточек в ряд</li>

21 <li>При ширине от 768px до 992px расставляет по 4 карточки в ряд</li>

22 <li>При ширине от 576px до 768px расставляет по 2 карточки в ряд</li>

23 <li>При ширине меньше 576px расставляет по 1 карточке в ряд</li>

24 </ul>При таком количестве условий решение задачи сводится всего к добавлению пары классов на уровеньrow.

25 <a>Codepen</a>

26 Как и в прошлом примере, изменяйте значения, чтобы увидеть, как изменение всего одного класса влияет на верстку в целом.

27 Важно:при использовании классов вида.row-cols-*значения.col-*у элементов игнорируется. Управление по размещению карточек есть только на уровнеrow