Типографика

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

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

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

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

Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов font-family для всех ОС и девайсов.
Для более широкой и доступной шкалы шрифтов используется шрифт браузера по умолчанию font-size (обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера.
Используйте атрибуты $font-family-base, $font-size-base и $line-height-base как типографическую базу для <body>.
Задавайте глобальные цвета ссылок через $link-color.
Используйте $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-muted">С блеклым второстепенным текстом</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-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.

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

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 чтобы узнать, как это работает.

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;

// 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:             $border-width;
$hr-opacity:                  .25;

$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-bg:                     $yellow-100;

Миксины

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