Типография

<h1>h1. Заголовок Bootstrap</h1>
<h2>h2. Заголовок Bootstrap</h2>
<h3>h3. Заголовок Bootstrap</h3>
<h4>h4. Заголовок Bootstrap</h4>
<h5>h5. Заголовок Bootstrap</h5>
<h6>h6. Заголовок Bootstrap</h6>

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

<h3>
  Необычный заголовок дисплея
  <small class="text-muted">С блеклым второстепенным текстом</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>

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

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

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

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

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

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

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

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

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

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

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

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

$small-font-size:             .875em;

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

$text-muted:                  $gray-600;

$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;
$hr-height:                   $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$mark-padding:                .2em;

$dt-font-weight:              $font-weight-bold;

$nested-kbd-font-weight:      $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;