Типографика в 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 для отображения аббревиатуры несколько меньшим размером шрифта.


Цитаты

Чтобы применить стили 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.



Код

В Bootstrap элемент <code> отображается следующим образом


Ввод с клавиатуры

В Bootstrap элемент <kbd> отображается следующим образом.


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

В Bootstrap элемент <pre> отображается следующим образом.

Вы также можете добавить класс .pre-scrollable, чтобы установить max-height как 350 пикселей и задать полосу прокрутки по оси Y.


Образец текста

В Bootstrap элемент <samp> отображается следующим образом.


Переменные

В Bootstrap элемент <var> отображается следующим образом.