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

Bootstrap включает в себя стили, которые определяют, как показываются текстовые элементы.

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

По умолчанию в Bootstrap 4 font-size равен 16px (применяется к элементу <html>), к элементу <body> также применяется font-size равное 1rem.

Bootstrap использует «родной набор шрифтов» (системные шрифты пользователя) с запасным вариантом Helvetica Neue, Arial и sans-serif. У всех заголовков и элементов <p> удалено margin-top. Для заголовков margin-bottom задано как .5rem, а для элементов <p> оно задано как 1rem.

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

Заголовки

Вот пример элементов заголовка, как они показываются в Bootstrap 4.

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

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

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

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

Заголовки дисплея

Заголовки дисплея предназначены для того, чтобы выделяться больше, чем обычные заголовки. Существует четыре размера заголовка дисплея (.display-1, .display-2, .display-3 и .display-4). Так, например, элемент <h1> может быть представлен в четырёх разных размерах с помощью классов заголовков дисплея.

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

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

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

Помеченный текст

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

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

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

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

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

<abbr title="Structured Query Language" class="initialism">SQL</abbr> используется для запросов к базам данных.

Цитаты

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

Источник цитаты

Bootstrap отображает элементы <cite> и <footer>, вложенные в элемент <blockquote>, следующим образом.

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

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

И .text-right.

Списки

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

Нестилизованные списки

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

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

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

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

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

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

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

Обратите внимание, что это работает только при широкой области просмотра. Если вы не видите никакой разницы между отображением этого примера и предыдущего, тогда откройте предварительный просмотр в новом окне. Если он по-прежнему не отличается, вам потребуется устройство большего размера для просмотра данного примера.

В Bootstrap 3 используется класс .dl-horizontal, а Bootstrap 4 использует класс .row.