Урок 03

Сетка Bootstrap (Grid system)

Что такое сетка

Grid system — 12-колоночная сетка для раскладки.

Компоненты:

Container — обёртка.
Row — строка.
Col — колонки.

Пример:

<div class="container">
    <div class="row">
        <div class="col">Колонка 1</div>
        <div class="col">Колонка 2</div>
        <div class="col">Колонка 3</div>
    </div>
</div>

Что даёт: три равные колонки.

Правило: контейнер → строка → колонки. Всегда.

Breakpoints

6 контрольных точек:

Префикс	Устройство	Ширина
—	xs (phone)	< 576px
`sm`	phone	≥ 576px
`md`	tablet	≥ 768px
`lg`	desktop	≥ 992px
`xl`	large	≥ 1200px
`xxl`	extra	≥ 1400px

Правило: mobile-first. Класс без префикса — с самого маленького.

Containers

container — адаптивная ширина:

<div class="container">
    <!-- max-width меняется по брейкпоинтам -->
</div>

container-fluid — 100% ширина:

<div class="container-fluid">
    <!-- всегда на всю ширину -->
</div>

container-{breakpoint} — фиксировать до breakpoint:

<div class="container-sm">на 100% до sm, потом фикс</div>
<div class="container-md">на 100% до md, потом фикс</div>

Правило: container — стандарт. container-fluid — для full-width секций.

Row

<div class="row">
    <div class="col">...</div>
</div>

Что важно:

Row создаёт отрицательные margin по бокам.
Col имеет padding по бокам — gutter.
В сумме компенсируется.

Правило: всегда оборачивать колонки в row.

Колонки

Равные:

<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
</div>

3 колонки по 4 из 12.

Фиксированной ширины:

<div class="row">
    <div class="col-4">4 из 12</div>
    <div class="col-8">8 из 12</div>
</div>

Auto:

<div class="row">
    <div class="col-auto">Только по контенту</div>
    <div class="col">Занимает остальное</div>
</div>

Правило:

col — равные.
col-N — N/12.
col-auto — по содержимому.

Адаптивные колонки

Stack on mobile, side-by-side on desktop:

<div class="row">
    <div class="col-12 col-md-6 col-lg-4">Колонка</div>
    <div class="col-12 col-md-6 col-lg-4">Колонка</div>
    <div class="col-12 col-md-6 col-lg-4">Колонка</div>
</div>

Что происходит:

< 768px — на всю ширину, друг под другом.
≥ 768px — по 6 из 12 (две в ряду).
≥ 992px — по 4 из 12 (три в ряду).

Правило: col-12 col-md-6 col-lg-4 — классический паттерн карточек.

Отступы (gutters)

По умолчанию: 1.5rem (24px) между колонками.

Изменить:

<div class="row g-0">0 отступов</div>
<div class="row g-1">4px</div>
<div class="row g-2">8px</div>
<div class="row g-3">16px</div>
<div class="row g-4">24px</div>
<div class="row g-5">48px</div>

По осям:

<div class="row gx-4">горизонтальные</div>
<div class="row gy-4">вертикальные</div>

Адаптивные gutters:

<div class="row g-2 g-md-4">2 на мобильных, 4 на десктопе</div>

Правило: g-3 — стандарт для карточек.

Разрыв строки

w-100:

<div class="row">
    <div class="col-6">A</div>
    <div class="col-6">B</div>
    <div class="w-100"></div>
    <div class="col-6">C</div>
    <div class="col-6">D</div>
</div>

Что даёт: две строки по две колонки.

Выравнивание по вертикали

Всё содержимое строки:

<div class="row align-items-center">

Значения:

align-items-start — к верху.
align-items-center — по центру.
align-items-end — к низу.

Отдельная колонка:

<div class="col align-self-end">Внизу</div>

Выравнивание по горизонтали

Всё содержимое строки:

<div class="row justify-content-center">
    <div class="col-4">Центр</div>
</div>

Значения:

justify-content-start — влево (по умолчанию).
justify-content-center — центр.
justify-content-end — вправо.
justify-content-around — вокруг.
justify-content-between — между.
justify-content-evenly — равномерно.

Порядок колонок

order-*:

<div class="row">
    <div class="col order-2">Второй</div>
    <div class="col order-1">Первый</div>
</div>

Значения: order-1 ... order-5, order-first, order-last.

Адаптивные: order-md-1.

Смещение

offset-*:

<div class="row">
    <div class="col-4">Колонка</div>
    <div class="col-4 offset-4">Со смещением 4</div>
</div>

Что даёт: сдвиг вправо на N колонок.

Адаптивно: offset-md-4.

Вложенные строки

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-6">Вложенная 1</div>
                <div class="col-6">Вложенная 2</div>
            </div>
        </div>
        <div class="col-md-4">Сайдбар</div>
    </div>
</div>

Правило: вложенные row — внутри col. Не снаружи.

Практический пример: галерея

<div class="container">
    <h2 class="mb-4">Галерея</h2>

    <div class="row g-4">
        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Фото 1</h5>
                </div>
            </div>
        </div>
        <!-- ещё карточки -->
    </div>
</div>

Что даёт:

< 576px — 1 в ряду.
576-767 — 2.
768-991 — 2.
992-1199 — 3.
≥ 1200 — 4.

Практический пример: дашборд

<div class="container-fluid">
    <div class="row">
        <aside class="col-md-3 col-lg-2 bg-dark text-white min-vh-100 p-3">
            <h5>Меню</h5>
            <ul class="nav flex-column">
                <li class="nav-item"><a class="nav-link text-white" href="#">Дашборд</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#">Заказы</a></li>
            </ul>
        </aside>

        <main class="col-md-9 col-lg-10 p-4">
            <h1>Дашборд</h1>
            <div class="row g-3">
                <div class="col-sm-6 col-xl-3">
                    <div class="card p-3">
                        <div class="fs-3 fw-bold">1 234</div>
                        <div class="text-muted">Заказов</div>
                    </div>
                </div>
                <!-- ещё стат -->
            </div>
        </main>
    </div>
</div>

Практика

1. Сетка 3 колонки на десктопе, 1 на мобильном.

2. Карточки с g-4.

3. Sidebar + main.

4. Центрирование контента через justify-content-center.

5. Вертикальное выравнивание align-items-center.

6. Проверьте на разных разрешениях (Ctrl+Shift+M).

Частые ошибки

1. Колонки без row:

<div class="col">...</div>

Решение: в row.

2. Рow без container:

Margin ломает layout

Решение: в container.

3. Фиксированная ширина вместо колонок:

<div style="width: 300px">

Решение: col-md-4.

4. Много брейкпоинтов:

class="col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 col-xxl-2"

Решение: 2-3 достаточно.

5. Забыть col-12 для mobile:

На мобильных выглядит плохо

Решение: col-12 для mobile-first.

6. Кастомные margin вместо gutters:

<div class="col" style="margin: 10px">

Решение: g-3 на row.

7. Вложенные row без col:

<div class="row">
    <div class="row">

Решение: row → col → row.

8. Использование сетки для не-сетки:

Два столбца вместо flex

Решение: flex или grid, если не нужна 12-колонок.

Итог

12 колонок — основа сетки.
6 breakpoints: sm, md, lg, xl, xxl.
container — обёртка.
row — строка.
col — колонка.
col-N — N из 12.
col-auto — по контенту.
g-N — gutters.
align-items-* — по вертикали.
justify-content-* — по горизонтали.
order-*, offset-* — порядок и смещение.
col-12 col-md-6 col-lg-4 — классика.

Дальше — типография и утилиты.