09. Адаптивный дизайн

Что такое адаптивный дизайн

Адаптивный дизайн — это подход, при котором сайт автоматически подстраивается под размер экрана пользователя: от телефона до телевизора.

Bootstrap создан специально для адаптивности: вам не нужно вручную писать десятки медиа-запросов — всё уже встроено!

Брейкпоинты Bootstrap

Брейкпоинты (breakpoints) — это контрольные точки ширины экрана, при которых меняется макет страницы.

Bootstrap использует стандартные брейкпоинты:

• xs

  — до 576px (мобильные устройства)

• sm

  — ≥ 576px

• md

  — ≥ 768px (планшеты)

• lg

  — ≥ 992px (ноутбуки)

• xl

  — ≥ 1200px (большие мониторы)

• xxl

  — ≥ 1400px (очень большие экраны)

Пример использования:

<div class="row">
  <div class="col-12 col-md-6 col-lg-3 bg-primary text-white p-3">1</div>
  <div class="col-12 col-md-6 col-lg-3 bg-success text-white p-3">2</div>
  <div class="col-12 col-md-6 col-lg-3 bg-warning text-dark p-3">3</div>
  <div class="col-12 col-md-6 col-lg-3 bg-danger text-white p-3">4</div>
</div>

Что произойдёт:

• На телефоне (меньше 576px) — все блоки идут друг под другом (по 12 колонок).
• На планшете (от 768px) — 2 блока в ряд.
• На ноутбуке (от 992px) — 4 блока в ряд.

Работа с изображениями: img-fluid

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

.img-fluid

Он заставляет изображение уменьшаться или увеличиваться в зависимости от размера контейнера.

Пример:

<img src="https://via.placeholder.com/800x400" class="img-fluid rounded shadow" alt="Пример изображения">

• .img-fluid

  — автоматически масштабирует изображение по ширине контейнера.

• .rounded

  — добавляет скруглённые углы.

• .shadow

  — лёгкая тень для визуальной глубины.

Видео и соотношение сторон (ratio)

Если вы вставляете видео или iframe (например, YouTube), используйте компонент ratio. Он сохраняет правильные пропорции.

Пример YouTube-видео:

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

Доступные варианты:

• .ratio-1x1

  — квадрат (1:1)

• .ratio-4x3

  — стандартное видео (4:3)

• .ratio-16x9

  — широкоформатное (по умолчанию для YouTube)

• .ratio-21x9

  — очень широкое (кинематографичное)

Скрытие и показ элементов на разных устройствах

Иногда нужно скрыть элемент на телефоне, но показать на ПК — и наоборот. Для этого есть утилиты отображения:

Примеры:

<p class="d-none d-md-block">Этот текст виден только на планшетах и выше.</p>
<p class="d-block d-md-none">Этот текст виден только на телефонах.</p>

Пример адаптивной страницы

HTML:

<div class="container my-5">
  <div class="text-center mb-4">
    <h1 class="fw-bold">Адаптивная страница Bootstrap</h1>
    <p class="lead text-secondary">Попробуй изменить ширину окна браузера 👇</p>
  </div>
  
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100 shadow-sm">
        <img src="https://via.placeholder.com/400x200" class="card-img-top img-fluid" alt="">
        <div class="card-body">
          <h5 class="card-title">Карточка №1</h5>
          <p class="card-text">Эта карточка изменяет размер вместе с экраном.</p>
        </div>
      </div>
    </div>
<div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100 shadow-sm">
        <img src="https://via.placeholder.com/400x200" class="card-img-top img-fluid" alt="">
        <div class="card-body">
          <h5 class="card-title">Карточка №2</h5>
          <p class="card-text">Попробуй открыть эту страницу на телефоне!</p>
        </div>
      </div>
    </div>
<div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100 shadow-sm">
        <img src="https://via.placeholder.com/400x200" class="card-img-top img-fluid" alt="">
        <div class="card-body">
          <h5 class="card-title">Карточка №3</h5>
          <p class="card-text">Bootstrap сам решит, сколько колонок в ряд.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Итоги урока

Теперь вы знаете:

• Что такое адаптивный дизайн и зачем он нужен.
• Как работают брейкпоинты в Bootstrap.
• Как делать изображения и видео адаптивными с помощью

  .img-fluid

  и

  .ratio

• Как скрывать и показывать элементы на разных устройствах.
• Как создавать полностью адаптивные карточки и сетки.