Урок 04

Типография и утилиты

Типографика

Bootstrap задаёт базу:

body {
    font-family: system-ui, -apple-system, ...;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
}

Что даёт: без настройки уже читаемый текст.

Заголовки

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
...
<h6>Заголовок 6</h6>

Классы:

<p class="h1">Как h1</p>
<p class="h2">Как h2</p>

Что даёт: стиль заголовка без семантики.

display-*:

<h1 class="display-1">Огромный</h1>
<h1 class="display-4">Крупный</h1>
<h1 class="display-6">Средний</h1>

Что даёт: крупные заголовки для hero.

Абзацы

<p>Обычный текст.</p>
<p class="lead">Лид-абзац — крупнее и светлее.</p>
<p class="text-muted">Приглушённый текст.</p>

Списки

<ul class="list-unstyled">
    <li>Без маркеров</li>
</ul>

<ul class="list-inline">
    <li class="list-inline-item">Первый</li>
    <li class="list-inline-item">Второй</li>
</ul>

Что даёт:

list-unstyled — без маркеров.
list-inline — в строку.

Цитаты

<blockquote class="blockquote">
    <p>Цитата.</p>
    <footer class="blockquote-footer">
        Автор в <cite>Источник</cite>
    </footer>
</blockquote>

Код

<code>&lt;div&gt;</code>
<kbd>Ctrl + C</kbd>
<pre><code>...</code></pre>

Утилиты

Утилиты — классы для быстрых правок без своего CSS.

Формат: {property}-{breakpoint}-{value}.

Пример: mt-3, mt-md-4, text-center, bg-primary.

Отступы

Свойства:

m — margin.
p — padding.

Направления:

t — top.
b — bottom.
s — start (left в LTR).
e — end (right в LTR).
x — left + right.
y — top + bottom.
(без буквы) — все стороны.

Значения:

0 — 0.
1 — 0.25rem (4px).
2 — 0.5rem (8px).
3 — 1rem (16px).
4 — 1.5rem (24px).
5 — 3rem (48px).
auto — auto (только margin).

Примеры:

<div class="mt-3">margin-top: 1rem</div>
<div class="p-4">padding: 1.5rem</div>
<div class="px-3">padding-left + right</div>
<div class="my-5">margin-top + bottom</div>
<div class="mx-auto">margin: 0 auto — центрирование</div>

Адаптивные:

<div class="p-2 p-md-4">2 на мобильных, 4 на планшете+</div>

Правило:

Обычный layout — через сетку и свои классы.
Мелкие правки — через утилиты.

Цвет текста

<p class="text-primary">Синий</p>
<p class="text-secondary">Серый</p>
<p class="text-success">Зелёный</p>
<p class="text-danger">Красный</p>
<p class="text-warning">Жёлтый</p>
<p class="text-info">Голубой</p>
<p class="text-light">Светлый</p>
<p class="text-dark">Тёмный</p>
<p class="text-body">Основной</p>
<p class="text-muted">Приглушённый</p>
<p class="text-white">Белый</p>

Фон

<div class="bg-primary">Синий</div>
<div class="bg-secondary">Серый</div>
<div class="bg-success">Зелёный</div>
<div class="bg-danger">Красный</div>
<div class="bg-warning">Жёлтый</div>
<div class="bg-info">Голубой</div>
<div class="bg-light">Светлый</div>
<div class="bg-dark">Тёмный</div>
<div class="bg-white">Белый</div>
<div class="bg-transparent">Прозрачный</div>

С прозрачностью:

<div class="bg-primary bg-opacity-10">10%</div>
<div class="bg-primary bg-opacity-25">25%</div>
<div class="bg-primary bg-opacity-50">50%</div>
<div class="bg-primary bg-opacity-75">75%</div>

Text-align

<p class="text-start">Слева</p>
<p class="text-center">По центру</p>
<p class="text-end">Справа</p>

Адаптивно:

<p class="text-center text-md-start">
    Центр на мобильных, слева с md
</p>

Размеры

<div class="w-25">25%</div>
<div class="w-50">50%</div>
<div class="w-75">75%</div>
<div class="w-100">100%</div>
<div class="w-auto">auto</div>

<div class="h-25">25% height</div>
<div class="h-100">100% height</div>

<div class="mw-100">max-width: 100%</div>
<div class="mh-100">max-height: 100%</div>

<div class="min-vw-100">min-width: 100vw</div>
<div class="min-vh-100">min-height: 100vh</div>

min-vh-100 — для fullscreen-секций.

Display

<div class="d-none">Не показывать</div>
<div class="d-block">block</div>
<div class="d-inline">inline</div>
<div class="d-inline-block">inline-block</div>
<div class="d-flex">flex</div>
<div class="d-grid">grid</div>

Адаптивно:

<div class="d-none d-md-block">
    Скрыт на мобильных, показан на md+
</div>

<div class="d-block d-md-none">
    Показан только на мобильных
</div>

Классика для адаптива.

Flex утилиты

<div class="d-flex justify-content-between align-items-center gap-3">
    <div>Логотип</div>
    <div>Меню</div>
    <div>Кнопка</div>
</div>

Основные:

justify-content-* — по главной оси.
align-items-* — по поперечной.
flex-row / flex-column — направление.
flex-wrap — перенос.
gap-* — отступы.
flex-grow-1 — растянуть.

Правило: не писать свой flex-CSS, использовать утилиты.

Границы

<div class="border">Рамка</div>
<div class="border-top">Только сверху</div>
<div class="border-0">Убрать</div>
<div class="border border-primary">Синяя</div>
<div class="border border-2">Толще</div>

<div class="rounded">Скругление</div>
<div class="rounded-0">Без</div>
<div class="rounded-3">Больше</div>
<div class="rounded-circle">Круг</div>
<div class="rounded-pill">Пилюля</div>

Тени

<div class="shadow-sm">Маленькая</div>
<div class="shadow">Обычная</div>
<div class="shadow-lg">Большая</div>
<div class="shadow-none">Без тени</div>

Позиционирование

<div class="position-relative">Относительно</div>
<div class="position-absolute">Абсолютно</div>
<div class="position-fixed">Фиксировано</div>
<div class="position-sticky">Sticky</div>

<div class="position-absolute top-0 start-0">Левый верх</div>
<div class="position-absolute top-50 start-50 translate-middle">Центр</div>

translate-middle — центрирование через transform.

Overflow

<div class="overflow-auto">Автоскролл</div>
<div class="overflow-hidden">Скрыть</div>
<div class="overflow-visible">Показать</div>
<div class="overflow-scroll">Всегда скролл</div>

Visibility

<div class="visible">Видим</div>
<div class="invisible">Скрыт, но занимает место</div>

Opacity

<div class="opacity-0">Прозрачный</div>
<div class="opacity-25">25%</div>
<div class="opacity-50">50%</div>
<div class="opacity-75">75%</div>
<div class="opacity-100">Непрозрачный</div>

Font weight и size

<p class="fw-bold">Жирный</p>
<p class="fw-semibold">Полужирный</p>
<p class="fw-normal">Обычный</p>
<p class="fw-light">Тонкий</p>

<p class="fs-1">Самый крупный</p>
<p class="fs-6">Самый мелкий</p>

Line-height

<p class="lh-1">1</p>
<p class="lh-sm">1.25</p>
<p class="lh-base">1.5</p>
<p class="lh-lg">2</p>

Практика

1. Карточка с утилитами:

<div class="card p-4 shadow-sm border rounded-3">
    <h5 class="fw-bold mb-2">Заголовок</h5>
    <p class="text-muted mb-3">Описание карточки</p>
    <button class="btn btn-primary">Кнопка</button>
</div>

2. Hero-секция:

<section class="min-vh-100 d-flex align-items-center bg-dark text-white">
    <div class="container text-center">
        <h1 class="display-3 fw-bold mb-4">Заголовок</h1>
        <p class="lead mb-5">Подзаголовок</p>
        <a href="#" class="btn btn-primary btn-lg">Начать</a>
    </div>
</section>

3. Панель с flex:

<div class="d-flex justify-content-between align-items-center p-3 border-bottom">
    <div class="fw-bold">Логотип</div>
    <div class="d-flex gap-3">
        <a href="#" class="text-decoration-none">Ссылка 1</a>
        <a href="#" class="text-decoration-none">Ссылка 2</a>
    </div>
    <button class="btn btn-primary btn-sm">Войти</button>
</div>

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

1. Утилиты для всего:

<div class="p-3 m-4 bg-primary text-white rounded shadow">

Решение: утилиты для правок. Layout — через сетку.

2. text-justify (в BS5 убрали):

Не работает

Решение: свой CSS.

3. Забыть breakpoint в адаптиве:

class="text-center"   <!-- на всех размерах -->

Решение: text-center text-md-start.

4. Кастом через inline-стили:

<div style="padding: 20px">

Решение: p-4.

5. mx-auto без width:

Не центрирует

Решение: указать w-* или col.

6. min-vh-100 + p-5:

Больше 100vh

Решение: box-sizing, d-flex.

7. Z-index через утилиты:

Отдельных классов нет

Решение: свой CSS.

8. Слишком много классов в одном элементе:

<div class="d-flex justify-content-center align-items-center p-3 m-2 bg-primary bg-gradient text-white border border-2 rounded-3 shadow-lg">

Решение: свой класс через CSS/SCSS.

Итог

h1–h6 — заголовки.
display-1–display-6 — крупные.
lead — лид-абзац.
Отступы: m-*, p-*, mt-*, px-*.
Цвета: text-*, bg-*.
Display: d-*, d-none d-md-block.
Flex: d-flex justify-content-* align-items-*.
Границы: border, rounded.
Тени: shadow-sm, shadow, shadow-lg.
Позиционирование: position-*, top-*.
Размеры: w-*, h-*, min-vh-100.
Утилиты для правок, не для layout.

Дальше — кнопки, бейджи, ссылки.