Типография

Документация и примеры типографики 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>`	ч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. Начальный заголовок

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

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

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

Дисплей 1

Дисплей 2

Дисплей 3

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

Это вводной абзац. Он выделяется среди обычных абзацев.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

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

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

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

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

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

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

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

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

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

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

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

атрибут

HTML

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

Цитаты

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

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

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

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

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

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

Кто-то известный в Source Title

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

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

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

Кто-то известный в Source Title

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

Кто-то известный в Source Title

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Списки

без стиля

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

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

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

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

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

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

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

Срок

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

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

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

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

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

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

Вложение

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

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

Отзывчивые размеры шрифта

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

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