Типографика

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

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

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

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

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

h1. Заголовок bootstrap

h2. Заголовок bootstrap

h3. Заголовок bootstrap

h4. Заголовок bootstrap

h5. Заголовок bootstrap

h6. Заголовок bootstrap

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

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

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

«Заголовок дисплея»

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

Display 1

Display 2

Display 3

Display 4

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

«Лид»

Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .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.

тег-выделитель для подсветки текста.

~~Удаленный текст.~~

~~Зачеркнутый.~~

Строка - дополнение к документу.

Подчеркнутая

Мелкий шрифт (типа нижний индекс).

Жирный текст.

Курсив.

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

Классы .mark и .small дают стили, одинаковые с тегами <mark> и <small>, но помогают избежать нежелательных семантических последствий, которые могут возникнуть с тегами.

Также, свободно пользуйтесь тегами <b> и <i> в HTML5. <b> создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а <i> выделяет цитаты, прямую речь, термины и т.д.

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

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

Сокращения

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

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

<blockquote class="blockquote">
  <p class="mb-0">Известная цитата, содержащаяся в элементе цитаты.</p>
</blockquote>

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

Добавьте <footer class="blockquote-footer"> для идентификации источника. Оберните название исходной работы в <cite>.

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

Кто-то известный в названии источника

<blockquote class="blockquote">
  <p class="mb-0">Известная цитата, содержащаяся в элементе цитаты.</p>
  <footer class="blockquote-footer">Кто-то известный в <cite title="Название источника">названии источника</cite></footer>
</blockquote>

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

При необходимости используйте текстовые утилиты, чтобы изменить выравнивание цитаты.

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

Кто-то известный в названии источника

<blockquote class="blockquote text-center">
  <p class="mb-0">>Известная цитата, содержащаяся в элементе цитаты.</p>
  <footer class="blockquote-footer">Кто-то известный в <cite title="Название источника">названии источника</cite></footer>
</blockquote>

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

Кто-то известный в названии источника

<blockquote class="blockquote text-right">
  <p class="mb-0">Известная цитата, содержащаяся в элементе цитаты.</p>
  <footer class="blockquote-footer">Кто-то известный в <cite title="Название источника">названии источника</cite></footer>
</blockquote>

Списки

Без элементов стилизации

Удаляет свойство по умолчанию 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>

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

Описание списка

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

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">Описание списка</dt>
  <dd class="col-sm-9">Список описаний идеально подходит для определения терминов.</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>

Размеры адаптивного шрифта

Начиная с версии 4.3.0, Bootstrap поставляется с возможностью включения гибких размеров шрифта, что позволяет тексту более естественно масштабироваться в зависимости от устройства и размеров области просмотра. RFS можно включить, изменив переменную Sass $enable-responsive-font-sizes на true и перекомпилировав Bootstrap.

Для поддержки RFS, мы используем миксин Sass для замены наших обычных свойств font-size. Размеры адаптивного шрифта будут скомпилированы в функции calc() с сочетанием rem и единиц просмотра, чтобы обеспечить адаптивное масштабирование. Подробнее о RFS и его конфигурации можно найти в его репозитории GitHub.