Типографика в Bootstrap 5

На этой странице показано, как отображаются определённые текстовые элементы при использовании Bootstrap (часто без добавления каких-либо классов). В целом, любая страница, которая ссылается на таблицу стилей Bootstrap 5, будет отображать эти элементы одинаково (если они не переопределены другими стилями).

Основной текст

Bootstrap 5 использует размер корневого font-size браузера по умолчанию (обычно это 16px).

Bootstrap использует «родной набор шрифтов» (системные шрифты пользователя), который выбирает наилучшее семейство шрифта для каждой ОС и устройства.

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

Использовать атрибуты $font-family-base, $font-size-base и $line-height-base в качестве основы, применяемой к элементу <body>.
Задать глобальный цвет ссылок с помощью $link-color.
Использовать $body-bg, чтобы установить цвет фона для элемента <body> (по умолчанию это #fff).

Заголовки

Вот пример элементов заголовков и как они выглядят в Bootstrap 5:

Классы заголовков

Bootstrap также включает в себя классы заголовков от .h1 до .h6 на случай, если вам нужно отобразить некоторый строчный текст в стиле определённого заголовка.

Подзаголовки

Вы можете создать подзаголовок или вторичный текст, поместив текст в элемент <small> внутри заголовка. Вы также можете применить классы Bootstrap к этому элементу.

Отображаемые заголовки

Отображаемые заголовки предназначены для того, чтобы выделяться больше обычных заголовков. В Bootstrap 5 предусмотрено шесть размеров отображаемых заголовков (.display-1, .display-2, .display-3, .display-4, .display-5 и .display-6).

Поэтому, например, элемент <h1> может быть показан в шести разных размерах с помощью классов отображаемых заголовков.

Чтобы создать отображаемый заголовок, добавьте один из вышеперечисленных классов к элементу заголовка.

Ведущий текст

Вы можете выделить абзац с помощью класса .lead.

Маркированный текст

HTML-элемент <mark> представляет собой текст, маркированный или выделенный для справочных целей, в связи с его релевантностью в другом контексте.

Вот пример того, как Bootstrap отображает этот элемент:

Аббревиатуры

В HTML <abbr> представляет собой аббревиатуру или акроним. Атрибут title можно использовать для объяснения аббревиатуры.

В Bootstrap аббревиатуры с атрибутом title отображаются с тонким пунктирным подчёркиванием, а при наведении на текст получают курсор справки.

Вы можете добавить класс .initialism, чтобы отобразить аббревиатуру шрифтом несколько меньшего размера.

Цитаты

Чтобы применить стили Bootstrap к элементу <blockquote>, используйте класс .blockquote.

Цитаты — источник

При указании авторства поместите <blockquote> в элемент <figure> и используйте либо <figcaption>, либо другой блочный элемент, например <p>, с классом .blockquote-footer.

Также обязательно вставьте название источника в элемент <cite>.

Выравнивание цитат

Вы можете использовать текстовые утилиты Bootstrap, чтобы указать как выравнивать цитаты. Например, .text-center:

Или .text-end:

Списки

Bootstrap применяет различные стили и имеет ряд классов специально для списков.

Списки без стиля

Вы можете использовать класс .list-unstyled, чтобы отобразить списки без list-style и margin-left, заданных по умолчанию:

Строчные списки

Вы можете использовать классы .list-inline и .list-inline-item для отображения списков в виде display: inline-block и с применением отступов:

Списки описаний

В Bootstrap списки описаний отображаются следующим образом:

Горизонтальные списки описаний

Вы можете сделать так, чтобы термины и описания выстраивались горизонтально, добавив к тегу <dl> класс .row , а затем любой из предопределённых классов системы сетки к тегам <dt> и <dd>.