in English

Типография

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

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

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

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

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

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

ч1. Начальный заголовок

ч2. Начальный заголовок

h3. Начальный заголовок

h4. Начальный заголовок

h5. Начальный заголовок

h6. Начальный заголовок

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.

Причудливый дисплейный заголовок с блеклым вторичным текстом

HTML

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Показать заголовки

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

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

Дисплей 5

Дисплей 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>

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

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

$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">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

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

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

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

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

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

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

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

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

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

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

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к аббревиатуре немного меньший размер шрифта.

атрибут

HTML

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

Цитаты

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

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

HTML

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

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

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

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

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.

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>

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

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и левое поле для элементов списка (только для непосредственных дочерних элементов). Это относится только к непосредственным дочерним элементам списка , то есть вам также нужно будет добавить класс для любых вложенных списков.

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

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.

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

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класс для усечения текста многоточием.

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

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

Срок

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

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

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

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

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

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

Вложение

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

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

Сасс

Переменные

Заголовки имеют некоторые специальные переменные для размера и интервала.

$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 использует Responsive Font Sizing (RFS) .