Типографика

Документация и примеры типографики Bootstrap, включая глобальные настройки, заголовки, текст документа, списки и т.д.

На этой странице

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

Bootstrap предустанавливает глобальные стили отображения, типографии и ссылок. Когда нужно настроить больше элементов, проверьте наши классы текстовых утилит.

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

Эти стили находятся в _reboot.scss, а глобальные переменные определены в _variables.scss. Задавайте $font-size-base в rem.

Заголовки

Доступны все HTML-заголовки от <h1> до <h6>.

Заголовок	Пример
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

<h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6>

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

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<pclass="h1">h1. Bootstrap heading</p><pclass="h2">h2. Bootstrap heading</p><pclass="h3">h3. Bootstrap heading</p><pclass="h4">h4. Bootstrap heading</p><pclass="h5">h5. Bootstrap heading</p><pclass="h6">h6. Bootstrap heading</p>

Настройка заголовков

Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.

Заголовок отображения С выцветшим "второстепенным" текстом

<h3> Заголовок отображения <smallclass="text-muted">С выцветшим "второстепенным" текстом</small></h3>

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

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

Отображение 1

Отображение 2

Отображение 3

Отображение 4

Отображение 5

Отображение 6

<h1class="display-1">Отображение 1</h1><h1class="display-2">Отображение 2</h1><h1class="display-3">Отображение 3</h1><h1class="display-4">Отображение 4</h1><h1class="display-5">Отображение 5</h1><h1class="display-6">Отображение 6</h1>

Отображаемые заголовки настраиваются с помощью карты Sass $display-font-sizes и двух переменных: $display-font-weight и $display-line-height.

$display-font-sizes:(1:5rem,2:4.5rem,3:4rem,4:3.5rem,5:3rem,6:2.5rem);$display-font-weight:300;$display-line-height:$headings-line-height;

«Лид»

Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead.

Это ведущий абзац. Он выделяется из обычных абзацев.

<pclass="lead"> Это ведущий абзац. Он выделяется из обычных абзацев.
</p>

Строчные текстовые элементы

Стили для обычных блочных элементов HTML5.

Тег-выделитель для подсветки текста.

~~Удаленный текст.~~

~~Зачеркнутый.~~

Строка - дополнение к документу.

Подчеркнутый текст

Мелкий шрифт (типа нижний индекс)

Жирный текст.

Курсив.

<p>Тег-выделитель для <mark>подсветки</mark> текста.</p><p><del>Удаленный текст.</del></p><p><s>Зачеркнутый.</s></p><p><ins>Строка - дополнение к документу.</ins></p><p><u>Подчеркнутый текст</u></p><p><small>Мелкий шрифт (типа нижний индекс).</small></p><p><strong>Жирный текст.</strong></p><p><em>Курсив.</em></p>

Помните, что эти теги должны использоваться в семантических целях:

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

Если Вы хотите стилизовать свой текст, Вы должны вместо этого использовать следующие классы:

.mark будут применять те же стили, что и .
.small будут применять те же стили, что и .
.text-decoration-underline будут применять те же стили, что и .
.text-decoration-line-through будут применять те же стили, что и <s>.

Можете свободно использовать теги  и  в HTML5.  создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а  выделяет цитаты, прямую речь, термины и т.д.

Классы текстовых утилит

Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.

Сокращения

Реализация элемента <abbr> нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.

Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.

attr

HTML

<p><abbrtitle="attribute">attr</abbr></p><p><abbrtitle="HyperText Markup Language"class="initialism">HTML</abbr></p>

Цитаты

Для цитат с другого источника в вашем документе. Оберните любой элемент в <blockquote class="blockquote"> для создания цитаты.

A well-known quote, contained in a blockquote element.

<blockquoteclass="blockquote"><p>A well-known quote, contained in a blockquote element.</p></blockquote>

Наименование источника

Спецификация HTML требует, чтобы атрибуты наименования источника размещалась за пределами тега <blockquote>. При использовании атрибуции оберните ваш <blockquote> в <figure> и используйте элемент <figcaption> или уровень блока (например, ) с классом .blockquote-footer. Не забудьте также обернуть название исходной работы в <cite>.

A well-known quote, contained in a blockquote element.

<figure><blockquoteclass="blockquote"><p>A well-known quote, contained in a blockquote element.</p></blockquote><figcaptionclass="blockquote-footer"> Someone famous in <citetitle="Source Title">Source Title</cite></figcaption></figure>

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

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

A well-known quote, contained in a blockquote element.

<figureclass="text-center"><blockquoteclass="blockquote"><p>A well-known quote, contained in a blockquote element.</p></blockquote><figcaptionclass="blockquote-footer"> Someone famous in <citetitle="Source Title">Source Title</cite></figcaption></figure>

A well-known quote, contained in a blockquote element.

<figureclass="text-end"><blockquoteclass="blockquote"><p>A well-known quote, contained in a blockquote element.</p></blockquote><figcaptionclass="blockquote-footer"> Someone famous in <citetitle="Source Title">Source Title</cite></figcaption></figure>

Списки

Без элементов стилизации

Удаляет свойство по умолчанию list-style и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.

This is a list.
It appears completely unstyled.
Structurally, it's still a list.
However, this style only applies to immediate child elements.
Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
This may still come in handy in some situations.

<ulclass="list-unstyled"><li>This is a list.</li><li>It appears completely unstyled.</li><li>Structurally, it's still a list.</li><li>However, this style only applies to immediate child elements.</li><li>Nested lists: <ul><li>are unaffected by this style</li><li>will still show a bullet</li><li>and have appropriate left margin</li></ul></li><li>This may still come in handy in some situations.</li></ul>

В линию

Удалены маркеры из списка и левый марджин margin с комбинацией двух классов: .list-inline и .list-inline-item.

This is a list item.
And another one.
But they're displayed inline.

<ulclass="list-inline"><liclass="list-inline-item">This is a list item.</li><liclass="list-inline-item">And another one.</li><liclass="list-inline-item">But they're displayed inline.</li></ul>

Описание и выравнивание

Для выравнивания по горизонтали используйте предопределенные классы нашей системы сетки (или семантические миксины). Для более длинного контента вы можете дополнительно добавить класс .text-truncate, чтобы обрезать текст с добавлением многоточия.

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

Список описаний идеально подходит для определения терминов.

Термин

Определение термина.

И еще немного текста определения заполнителя.

Другой термин

Это определение короткое, поэтому никаких лишних абзацев или чего-либо еще.

Усеченный термин усечен

Это может быть полезно, когда места мало. Добавляет многоточие в конце.

Вложенность

Список вложенных определений: Я слышал, Вам нравятся списки определений. Позвольте мне поместить список определений в Ваш список определений.

<dlclass="row"><dtclass="col-sm-3">Списки описаний</dt><ddclass="col-sm-9">Список описаний идеально подходит для определения терминов.</dd><dtclass="col-sm-3">Термин</dt><ddclass="col-sm-9"><p>Определение термина.</p><p>И еще немного текста определения заполнителя.</p></dd><dtclass="col-sm-3">Другой термин</dt><ddclass="col-sm-9">Это определение короткое, поэтому никаких лишних абзацев или чего-либо еще.</dd><dtclass="col-sm-3 text-truncate">Усеченный термин усечен</dt><ddclass="col-sm-9">Это может быть полезно, когда места мало. Добавляет многоточие в конце.</dd><dtclass="col-sm-3">Вложенность</dt><ddclass="col-sm-9"><dlclass="row"><dtclass="col-sm-4">Список вложенных определений</dt><ddclass="col-sm-8">Я слышал, Вам нравятся списки определений. Позвольте мне поместить список определений в Ваш список определений.</dd></dl></dd></dl>

Адаптивные размеры шрифта

В Bootstrap 5 мы включили адаптивные размеры шрифтов по умолчанию, что позволяет тексту более естественно масштабироваться в зависимости от размеров устройства и области просмотра. Загляните на страницу RFS чтобы узнать, как это работает.

Sass

Переменные

В заголовках есть несколько переменных, определяющих размер и интервал.

$headings-margin-bottom:$spacer*.5;$headings-font-family:null;$headings-font-style:null;$headings-font-weight:500;$headings-line-height:1.2;$headings-color:null;

Различные элементы типографики, описанные здесь и в Reboot, также имеют специальные переменные.

$lead-font-size:$font-size-base*1.25;$lead-font-weight:300;$small-font-size:.875em;$sub-sup-font-size:.75em;$text-muted:$gray-600;$initialism-font-size:$small-font-size;$blockquote-margin-y:$spacer;$blockquote-font-size:$font-size-base*1.25;$blockquote-footer-color:$gray-600;$blockquote-footer-font-size:$small-font-size;$hr-margin-y:$spacer;$hr-color:inherit;$hr-height:$border-width;$hr-opacity:.25;$legend-margin-bottom:.5rem;$legend-font-size:1.5rem;$legend-font-weight:null;$mark-padding:.2em;$dt-font-weight:$font-weight-bold;$nested-kbd-font-weight:$font-weight-bold;$list-inline-padding:.5rem;$mark-bg:#fcf8e3;

Миксины

Специальных миксинов для типографики нет, но Bootstrap действительно использует Адаптивный размер шрифта (RFS).