Типография

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

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

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

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

Используйте собственный стек шрифтов, который выбирает лучший font-family для каждой ОС и устройства.
Для более инклюзивной и доступной шкалы шрифтов мы предполагаем, что в браузере используется корневой размер шрифта font-size по умолчанию (обычно 16 пикселей), чтобы посетители могли настроить свои настройки браузера по умолчанию по мере необходимости.
Используйте атрибуты $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
`<h2></h2>`	h2. Заголовок Bootstrap
`<h3></h3>`	h3. Заголовок Bootstrap
`<h4></h4>`	h4. Заголовок Bootstrap
`<h5></h5>`	h5. Заголовок Bootstrap
`<h6></h6>`	h6. Заголовок Bootstrap

<h1>h1. Заголовок Bootstrap</h1>
<h2>h2. Заголовок Bootstrap</h2>
<h3>h3. Заголовок Bootstrap</h3>
<h4>h4. Заголовок Bootstrap</h4>
<h5>h5. Заголовок Bootstrap</h5>
<h6>h6. Заголовок Bootstrap</h6>

Также доступны классы от .h1 до .h6, когда Вы хотите соответствовать стилю шрифта заголовка, но не можете использовать связанный элемент HTML.

h1. Заголовок Bootstrap

h2. Заголовок Bootstrap

h3. Заголовок Bootstrap

h4. Заголовок Bootstrap

h5. Заголовок Bootstrap

h6. Заголовок Bootstrap

html

<p class="h1">h1. Заголовок Bootstrap</p>
<p class="h2">h2. Заголовок Bootstrap</p>
<p class="h3">h3. Заголовок Bootstrap</p>
<p class="h4">h4. Заголовок Bootstrap</p>
<p class="h5">h5. Заголовок Bootstrap</p>
<p class="h6">h6. Заголовок Bootstrap</p>

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

Используйте включенные служебные классы, чтобы воссоздать небольшой текст вторичного заголовка из Bootstrap 3.

Необычный заголовок отображения С блеклым второстепенным текстом

html

<h3>
  Необычный заголовок отображения
  <small class="text-body-secondary">С блеклым второстепенным текстом</small>
</h3>

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

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

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

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

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

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

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

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

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

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

Заголовки дисплея настраиваются с помощью двух переменных: $display-font-family и $display-font-style.

scss/_variables.scss

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

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Ведущий

Выделите абзац, добавив .lead.

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

html

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

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

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

Вы можете использовать тег mark для выделения текста.

~~Эта строка текста должна рассматриваться как удаленный текст.~~

~~Эта строка текста считается неточной.~~

Эта строка текста должна рассматриваться как дополнение к документу..

Эта строка текста будет отображаться как подчеркнутая.

Эту строку текста следует рассматривать как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

html

<p>Вы можете использовать тег mark для <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.  предназначен для выделения слов или фраз без придания дополнительной важности, в то время как  в основном используется для озвучивания, технических терминов и т.д.

Текстовые утилиты

Измените выравнивание, преобразование, стиль, толщину, высоту строки, оформление и цвет текста с помощью наших текстовых утилит и цветовых утилит.

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

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

Добавьте к аббревиатуре .initialism, чтобы уменьшить размер шрифта.

attr

HTML

html

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

Цитаты

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

Известная цитата, содержащаяся в элементе цитаты.

html

<blockquote class="blockquote">
  <p>Известная цитата, содержащаяся в элементе цитаты.</p>
</blockquote>

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

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

Известная цитата, содержащаяся в элементе цитаты.

html

<figure>
  <blockquote class="blockquote">
    <p>Известная цитата, содержащаяся в элементе цитаты.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Кто-то, известный в <cite title="Source Title">названии источника</cite>
  </figcaption>
</figure>

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

При необходимости используйте текстовые утилиты, чтобы изменить выравнивание цитаты.

Известная цитата, содержащаяся в элементе цитаты.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>Известная цитата, содержащаяся в элементе цитаты.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Кто-то, известный в <cite title="Source Title">названии источника</cite>
  </figcaption>
</figure>

Известная цитата, содержащаяся в элементе цитаты.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>Известная цитата, содержащаяся в элементе цитаты.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Кто-то, известный в <cite title="Source Title">названии источника</cite>
  </figcaption>
</figure>

Списки

Без стиля

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

Это список.
Это выглядит совершенно без стиля.
Структурно это все-таки список.
Однако этот стиль применяется только к непосредственным дочерним элементам.
Вложенные списки:
- не подвержены влиянию этого стиля
- все равно покажет пулю
- и иметь соответствующее левое поле
В некоторых ситуациях это может пригодиться.

html

<ul class="list-unstyled">
  <li>Это список.</li>
  <li>Это выглядит совершенно без стиля.</li>
  <li>Структурно это все-таки список.</li>
  <li>Однако этот стиль применяется только к непосредственным дочерним элементам.</li>
  <li>Вложенные списки:
    <ul>
      <li>не подвержены влиянию этого стиля</li>
      <li>все равно покажет пулю</li>
      <li>и иметь соответствующее левое поле</li>
    </ul>
  </li>
  <li>В некоторых ситуациях это может пригодиться.</li>
</ul>

В линию

Удалите маркеры списка и примените небольшое поле margin с помощью комбинации двух классов: .list-inline и .list-inline-item.

Это элемент списка.
И еще один.
Но они отображаются инлайновыми.

html

<ul class="list-inline">
  <li class="list-inline-item">Это элемент списка.</li>
  <li class="list-inline-item">И еще один.</li>
  <li class="list-inline-item">Но они отображаются инлайновыми.</li>
</ul>

Выравнивание списка описаний

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

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

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

Термин

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

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

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

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

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

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

Вложенность

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

html

<dl class="row">
  <dt class="col-sm-3">Списки описаний</dt>
  <dd class="col-sm-9">Список описаний идеально подходит для определения терминов.</dd>

  <dt class="col-sm-3">Термин</dt>
  <dd class="col-sm-9">
    <p>Определение термина.</p>
    <p>И еще немного текста определения заполнителя.</p>
  </dd>

  <dt class="col-sm-3">Другой термин</dt>
  <dd class="col-sm-9">Это определение короткое, поэтому никаких лишних абзацев или чего-либо еще.</dd>

  <dt class="col-sm-3 text-truncate">Усеченный термин усечен</dt>
  <dd class="col-sm-9">Это может быть полезно, когда места мало. Добавляет многоточие в конце.</dd>

  <dt class="col-sm-3">Вложенность</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Список вложенных определений</dt>
      <dd class="col-sm-8">Я слышал, Вам нравятся списки определений. Позвольте мне поместить список определений в Ваш список определений.</dd>
    </dl>
  </dd>
</dl>

Размеры адаптивного шрифта

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

CSS

Sass переменные

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

scss/_variables.scss

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

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

scss/_variables.scss

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

// fusv-disable
$text-muted:                  var(--#{$prefix}secondary-color); // Deprecated in 5.3.0
// fusv-enable

$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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             var(--#{$prefix}border-width);
$hr-opacity:                  .25;

$vr-border-width:             var(--#{$prefix}border-width);

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-color:                  $body-color;
$mark-bg:                     $yellow-100;

Sass миксины

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