Типография

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

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

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

html

<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.

Fancy display heading With faded secondary text

html

<h3>
  Fancy display heading
  <small class="text-body-secondary">With faded secondary text</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-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.

Это параграф lead. Он выделяется среди обычных параграфов.

html

<p class="lead">
  Это параграф lead. Он выделяется среди обычных параграфов.
</p>

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

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

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

html

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</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 как цитату.

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

html

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

Указание источника

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

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

html

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

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

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

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

html

<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.

html

<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.

html

<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.

html

<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, чтобы обрезать текст многоточием.

Description lists

A description list is perfect for defining terms.

Term

Definition for the term.

And some more placeholder definition text.

Another term

This definition is short, so no extra paragraphs or anything.

Truncated term is truncated

This can be useful when space is tight. Adds an ellipsis at the end.

Nesting

Nested definition list: I heard you like definition lists. Let me put a definition list inside your definition list.

html

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</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;

// scss-docs-start vr-variables
$vr-border-width:             var(--#{$prefix}border-width);
// scss-docs-end vr-variables

$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).