Source

Типография

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 как цитату.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

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

<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и левое поле для элементов списка (только для непосредственных дочерних элементов). Это относится только к непосредственным дочерним элементам списка , то есть вам также нужно будет добавить класс для любых вложенных списков.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Угревая сыпь
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

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

Лорем ипсум
Фазеллус якулис
Нулла волютпат

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

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

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

Юисмод

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Порта Малесуада

Etiam porta sem malesuada magna mollis euismod.

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Вложение

Вложенный список определений: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

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

Отзывчивая типографика

Адаптивная типографика относится к масштабированию текста и компонентов путем простой настройки корневого элемента в font-sizeрамках серии медиа-запросов. Bootstrap не делает этого за вас, но его довольно легко добавить, если вам это нужно.

Вот пример на практике. Выберите любые font-sizes и медиа-запросы, которые вы хотите.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}