Шрифты

Документация и примеры для шрифтов 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
`<h2></h2>`	h2. Заголовок Bootstrap
`<h3></h3>`	h3. Заголовок Bootstrap
`<h4></h4>`	h4. Заголовок Bootstrap
`<h5></h5>`	h5. Заголовок Bootstrap
`<h6></h6>`	h6. Заголовок Bootstrap

<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-элемент.

Открыть пример на getbootstrap.com

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

Открыть пример на getbootstrap.com

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

Заголовки отображения

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

Открыть пример на getbootstrap.com

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

Открыть пример на getbootstrap.com

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Элементы текста в строку

Стиль для общих инлайновых HTML5 элементов.

Открыть пример на getbootstrap.com

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

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

Хотя выше не показано, вы можете использовать <b> и <i> в HTML5. <b> предназначен для выделения слов или фраз без передачи дополнительной важности, а <i> — в основном для голоса, технических терминов и т.д.

Утилиты текста

Измените выравнивание текста, преобразование, стиль, вес и цвет с помощью наших утилит текста и утилит цвета.

Сокращения

Стильное применение HTML-элемента <abbr> для сокращений и аббревиатур, чтобы показать полную версию при наведении курсора. Сокращения по умолчанию подчёркнуты и получают курсор помощи для предоставления дополнительного контекста при наведении и для пользователей вспомогательных технологий.

Добавьте .initialism к аббревиатуре для уменьшения размера шрифта.

Открыть пример на getbootstrap.com

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

Блочные цитаты

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

Открыть пример на getbootstrap.com

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

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

Открыть пример на getbootstrap.com

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

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

Открыть пример на getbootstrap.com

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Открыть пример на getbootstrap.com

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Списки

Нестилизованные

Удалите стандартный list-style и отступ слева для пунктов списка (только непосредственные потомки). Это относится только к пунктам списка, являющимся непосредственными потомками, поэтому вам потребуется добавить класс для любых вложенных списков.

Открыть пример на getbootstrap.com

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Встроеные

Удалите маркеры списков и примените легкий margin с помощью комбинации двух классов, .list-inline и .list-inline-item.

Открыть пример на getbootstrap.com

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Выравнивание списка описаний

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

Открыть пример на getbootstrap.com

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

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

Начиная с v4.3.0, Bootstrap поставляется с возможностью включения адаптивных размеров шрифтов, позволяющих более естественно масштабировать текст на различных устройствах и размерах экрана. АДС можно включить, изменив переменную Sass $enable-responsive-font-sizes на true и перекомпилировав Bootstrap.

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

© 2011–2020 Twitter, Inc.
© 2011–2020 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/4.5/content/typography/