Типографика и текст
Bootstrap с самого начала задаёт тексту единый системный шрифт, размер 1rem и удобную высоту строки. Поверх этого есть классы, которые меняют размер, начертание и выравнивание текста. С ними заголовок лендинга и подписи в таблицах оформляются без своих стилей.
Крупные заголовки
Обычные h1–h6 уже оформлены. Для главного заголовка лендинга есть классы display-1–display-6 — они крупнее и тоньше. Класс lead выделяет вводный абзац:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<h1 class="display-5 fw-bold">Задачи под контролем</h1>
<p class="lead">Tasko помогает команде договориться, кто и что делает к пятнице.</p>
<p>Обычный абзац для сравнения.</p>В превью — крупный жирный заголовок, вводный текст побольше и обычный абзац.
Размер и начертание
| Класс | Что делает |
|---|---|
fs-1 … fs-6 | Размер шрифта как у h1 … h6 |
fw-bold, fw-semibold, fw-normal, fw-light | Жирность |
fst-italic | Курсив |
small | Мелкий текст |
text-uppercase, text-lowercase, text-capitalize | Регистр букв |
text-decoration-none, text-decoration-underline | Подчёркивание |
lh-1, lh-sm, lh-base, lh-lg | Высота строки |
Классы h1–h6 дают любому элементу вид заголовка, не меняя его смысла в HTML: <p class="h4"> выглядит как заголовок, но остаётся абзацем.
Выравнивание и перенос
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<p class="text-center">По центру</p>
<p class="text-end">По правому краю</p>
<p class="text-center text-md-start">По центру на телефоне, слева от 768 пикселей</p>
<div class="text-truncate border p-2" style="max-width: 220px">
Очень длинное название задачи, которое не помещается в строку
</div>Последний блок обрезает текст многоточием — так длинные названия задач не ломают строку таблицы. Класс text-nowrap запрещает перенос, а text-break разрешает разрыв длинного слова или ссылки.
Списки
list-unstyled убирает маркеры и отступ у списка, а list-inline с list-inline-item на пунктах ставит пункты в строку:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<ul class="list-inline">
<li class="list-inline-item">О сервисе</li>
<li class="list-inline-item">Цены</li>
<li class="list-inline-item">Контакты</li>
</ul>Получается строка ссылок для подвала лендинга.
Цитаты
Отзыв клиента оформляют тегом <blockquote class="blockquote">, а подпись под ним — классом blockquote-footer. Подпись получает серый цвет и тире перед текстом.
Частая ошибка
Брать h1 ради крупного текста, а h4 — ради мелкого. Уровень заголовка нужен для структуры страницы: по нему ориентируются поисковики и программы чтения с экрана. Выбирайте тег по смыслу, а размер подгоняйте классами fs-*, display-* или h1–h6.