Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Адаптивность Bootstrap: Основы верстки

Создание адаптивных сайтов — неотъемлемая часть любого современного сайта. Со многими концепциями адаптивности вы познакомились в курсе 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
-sm- >=576px 540px
-md- >=768px 720px
-lg- >=992px 960px
-xl- >=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 карточек в строке.

Вы можете выбрать любой из способов создания адаптивной сетки.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»