Типографика

Документация и примеры типографики 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

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

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

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

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

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

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

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

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Цитаты

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

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

<blockquote class="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>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

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

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

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

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

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

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="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.

<ul class="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.

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

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

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

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

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

Термин

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

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

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

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

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

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

Вложенность

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

<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 / 2;
$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).