Типографика

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

This is a lead paragraph. It stands out from regular paragraphs.

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

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

Классы текстовых утилит

Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.

Сокращения

Реализация элемента <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, чтобы обрезать текст с добавлением многоточия.

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.

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

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

Помочь проекту