Bootstrap Типография

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

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

<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>
Результат:

h1. Bootstrap заголовок

h2. Bootstrap заголовок

h3. Bootstrap заголовок

h4. Bootstrap заголовок

h5. Bootstrap заголовок

h6. Bootstrap заголовок

Настройка заголовков

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

<h3>
  Необычный заголовок для отображения
  <small class="text-body-secondary">С выцветшим вторичным текстом</small>
</h3>
Результат:

Необычный заголовок для отображения С выцветшим вторичным текстом

Отображать заголовки

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

<h1 class="display-1">Дисплей 1</h1>
<h1 class="display-2">Дисплей 2</h1>
<h1 class="display-3">Дисплей 3</h1>
<h1 class="display-4">Дисплей 4</h1>
<h1 class="display-5">Дисплей 5</h1>
<h1 class="display-6">Дисплей 6</h1>
Результат:

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

Дисплей 5

Дисплей 6

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

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

scss/_variables.scss

$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

Выделите абзац, добавив .lead.

<p class="lead">
  Это первый абзац. Он выделяется на фоне обычных абзацев.
</p>
Результат:

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

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

<p>Вы можете использовать тег mark, чтобы <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, чтобы выделить текст.

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

Эту строку текста следует считать неточной.

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

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

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

Эта строка отображается жирным шрифтом.

Эта строка отображается курсивом.

Помните, что эти теги следует использовать в семантических целях:

  • <mark> представляет текст, который отмечен или подсвечен для справочных целей или обозначения.
  • <small> представляет собой дополнительные комментарии и мелкий шрифт, например, авторские права и юридические тексты.
  • <s> представляет элементы, которые больше не являются релевантными или неточными.
  • <u> представляет собой интервал встроенного текста, который должен отображаться таким образом, чтобы указывалось, что он имеет нетекстовую аннотацию.

Если вы хотите придать тексту стиль, вам следует использовать вместо него следующие классы:

  • .mark будут применяться те же стили, что и <mark>.
  • .small будут применяться те же стили, что и <small>.
  • .text-decoration-underline будут применяться те же стили, что и <u>.
  • .text-decoration-line-through будут применяться те же стили, что и <s>.

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

Текстовые утилиты

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

Сокращения

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

Добавьте .initialism к аббревиатуре немного меньший размер шрифта.

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Результат:

attr

HTML

Blockquotes (Цитаты из блоков)

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

<blockquote class="blockquote">
  <p>Хорошо известная цитата, содержащаяся в элементе blockquote.</p>
</blockquote>
Результат:

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

Присвоение имени источнику

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

<figure>
  <blockquote class="blockquote">
    <p>Хорошо известная цитата, содержащаяся в элементе blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Кто-то известный в <cite title="Source Title">Название источника</cite>
  </figcaption>
</figure>
Результат:

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

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

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

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

<figure class="text-center">
  <blockquote class="blockquote">
    <p>Хорошо известная цитата, содержащаяся в элементе blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Кто-то известный в <cite title="Source Title">Название источника</cite>
  </figcaption>
</figure>
Результат:

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

Кто-то известный в Название источника
<figure class="text-end">
  <blockquote class="blockquote">
    <p>Хорошо известная цитата, содержащаяся в элементе blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Кто-то известный в <cite title="Source Title">Название источника</cite>
  </figcaption>
</figure>
Результат:

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

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

Списки

Без стиля

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

<ul class="list-unstyled">
  <li>Это список.</li>
  <li>Он выглядит совершенно не оформленным.</li>
  <li>Структурно это все еще список.</li>
  <li>Однако этот стиль применяется только к непосредственным дочерним элементам.</li>
  <li>Вложенные списки:
    <ul>
      <li>этот стиль не влияет</li>
      <li>по-прежнему будет отображать маркер</li>
      <li>и имеют соответствующее левое поле</li>
    </ul>
  </li>
  <li>Это все еще может пригодиться в некоторых ситуациях</li>
</ul>
Результат:
  • Это список.
  • Он выглядит совершенно не оформленным.
  • Структурно это все еще список.
  • Однако этот стиль применяется только к непосредственным дочерним элементам.
  • Вложенные списки:
    • этот стиль не влияет
    • по-прежнему будет отображать маркер
    • и имеют соответствующее левое поле
  • Это все еще может пригодиться в некоторых ситуациях

Встроенный

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

<ul class="list-inline">
  <li class="list-inline-item">Это элемент списка.</li>
  <li class="list-inline-item">И еще один.</li>
  <li class="list-inline-item">Но они отображаются встроенно.</li>
</ul>
Результат:
  • Это элемент списка.
  • И еще один.
  • Но они отображаются встроенно.

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

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

<dl class="row">
  <dt class="col-sm-3">Списки описаний</dt>
  <dd class="col-sm-9">Список описаний идеально подходит для определения терминов.</dd>

  <dt class="col-sm-3">Термин</dt>
  <dd class="col-sm-9">
    <p>Определение термина.</p>
    <p>И еще немного текста с определением заполнителя.</p>
  </dd>

  <dt class="col-sm-3">Еще один термин</dt>
  <dd class="col-sm-9">Это определение краткое, поэтому никаких дополнительных абзацев или чего-либо еще.</dd>

  <dt class="col-sm-3 text-truncate">Усеченный термин - это усеченный</dt>
  <dd class="col-sm-9">Это может быть полезно при ограниченном пространстве. Добавляет многоточие в конце.</dd>

  <dt class="col-sm-3">Вложенность</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Список вложенных определений</dt>
      <dd class="col-sm-8">Я слышал, вам нравятся списки определений. Позвольте мне поместить список определений в ваш список определений.</dd>
    </dl>
  </dd>
</dl>
Результат:
Списки описаний
Список описаний идеально подходит для определения терминов.
Термин

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

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

Еще один термин
Это определение краткое, поэтому никаких дополнительных абзацев или чего-либо еще.
Усеченный термин - это усеченный
Это может быть полезно при ограниченном пространстве. Добавляет многоточие в конце.
Вложенность
Список вложенных определений
Я слышал, вам нравятся списки определений. Позвольте мне поместить список определений в ваш список определений.

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

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

CSS

Переменные Sass

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

scss/_variables.scss

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              inherit;

Разные элементы типографии, описанные здесь и в Перезагрузке, также имеют специальные переменные.

scss/_variables.scss

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

// fusv-disable
$text-muted:                  var(--#{$prefix}secondary-color); // Deprecated in 5.3.0
// fusv-enable

$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:             var(--#{$prefix}border-width);
$hr-opacity:                  .25;

$vr-border-width:             var(--#{$prefix}border-width);

$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-color:                  $body-color;
$mark-bg:                     $yellow-100;

SASS миксы

Специальных миксинов для типографики нет, но Bootstrap использует адаптивный размер шрифта (RFS).

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

  1. Глобальные настройки
  2. Заголовки
    1. Настройка заголовков
  3. Отображать заголовки
  4. Lead
  5. Встроенные текстовые элементы
  6. Текстовые утилиты
  7. Сокращения
  8. Blockquotes (Цитаты из блоков)
    1. Присвоение имени источнику
    2. Выравнивание
  9. Списки
    1. Без стиля
    2. Встроенный
    3. Выравнивание списка описаний
  10. Адаптивные размеры шрифтов
  11. CSS
    1. Переменные Sass
    2. SASS миксы