Bootstrap5 Типографика
Настройки Bootstrap 5 по умолчанию
По умолчанию в Bootstrap 5font-sizeравен 16px,line-heightравен 1.5.
По умолчаниюfont-family— "Helvetica Neue", Helvetica, Arial, sans-serif.
Кроме того, все<p>элементыимеют margin-top: 0 、 margin-bottom: 1rem (16px).
<h1> - <h6>
Bootstrap определяет стили для всех HTML-заголовков (h1–h6). См. пример ниже:
Пример
<div class="container">
<h1>h1 Заголовок Bootstrap</h1>
<h2>h2 Заголовок Bootstrap</h2>
<h3>h3 Заголовок Bootstrap</h3>
<h4>h4 Заголовок Bootstrap</h4>
<h5>h5 Заголовок Bootstrap</h5>
<h6>h6 Заголовок Bootstrap</h6>
</div>
Попробуйте »
Вы также можете использовать классы от.h1до.h6для стилизации элементов:
Пример
<div class="container">
<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>
</div>
Попробуйте »
Классы Display для заголовков
Bootstrap также предоставляет четыре класса Display для управления стилями заголовков: .display-1, .display-2, .display-3, .display-4.
Пример
<div class="container">
<h1>Заголовок display</h1>
<p>Заголовки display могут выводить более крупные и более жирные стили шрифта.</p>
<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>
</div>
Попробуйте »
<small>
В Bootstrap 5 HTML<small>элемент используется для создания меньшего, более светлого текста:
Пример
<div class="container">
<h1>Заголовок с текстом меньшего размера</h1>
<p>Элемент small используется для текста меньшего размера и более светлого цвета:</p>
<h1>h1 заголовок<small>Подзаголовок</small></h1>
<h2>h2 заголовок<small>Подзаголовок</small></h2>
<h3>h3 заголовок<small>Подзаголовок</small></h3>
<h4>заголовок h4<small>Подзаголовок</small></h4>
<h5>заголовок h5<small>Подзаголовок</small></h5>
<h6>заголовок h6<small>Подзаголовок</small></h6>
</div>
Попробуйте »
<mark>
Bootstrap 5 определяет<mark>тег и.markclass с жёлтым фоном и внутренним отступом:
Пример
<div class="container">
<h1>Выделенный текст</h1>
<p>Используйте элемент mark, чтобы<mark>выделить</mark>текст.</p>
</div>
Попробуйте »
<abbr>
Bootstrap 5 определяет HTML<abbr>стиль элемента отображается как пунктирная граница внизу текста:
Пример
<div class="container">
<h1>Аббревиатуры</h1>
<p>Элемент abbr используется для разметки сокращения или аббревиатуры:</p>
<p>The <abbr title="Всемирная организация здравоохранения">ВОЗ</abbr> была основана в 1948 году.</p>
</div>
Попробуйте »
<blockquote>
Для цитируемого содержимого можно к<blockquote>добавить.blockquoteclass:
Пример
<div class="container">
<h1>Цитаты</h1>
<p>Элемент blockquote используется для представления содержимого из другого источника:</p>
<blockquote class="blockquote">
<p>В течение 50 лет WWF защищает будущее природы. Ведущая в мире природоохранная организация, WWF работает в 100 странах, и её поддерживают 1.2 миллиона членов в США и почти 5 миллионов по всему миру.</p>
<footer class="blockquote-footer">С сайта WWF</footer>
</blockquote>
</div>
Попробуйте »
<dl>
Bootstrap 5 определяет стили HTML<dl>элемента следующим образом:
Пример
<div class="container">
<h1>Списки описаний</h1>
<p>Элемент dl обозначает список описаний:</p>
<dl>
<dt>Кофе</dt>
<dd>- чёрный горячий напиток</dd>
<dt>Молоко</dt>
<dd>- белый холодный напиток</dd>
</dl>
</div>
Попробуйте »
<code>
Bootstrap 5 определяет стили HTML<code>элемента следующим образом:
Пример
<div class="container">
<h1>Фрагмент кода</h1>
<p>Вы можете разместить некоторые элементы code внутри элемента code:</p>
<p>Следующие HTML-элементы:<code>span</code>, <code>section</code>, и<code>div</code>используются для определения частей содержимого документа.</p>
</div>
Попробуйте сами »
<kbd>
Bootstrap 5 определяет стили HTML<kbd>элемента следующим образом:
Пример
<div class="container">
<h1>Ввод с клавиатуры</h1>
<p>Чтобы указать ввод, который обычно вводится с клавиатуры, используйте элемент kbd:</p>
<p>Используйте <kbd>ctrl + p</kbd> чтобы открыть диалоговое окно печати.</p>
</div>
Попробуйте сами »
<pre>
Bootstrap 5 определяет стили HTML<pre>элемента следующим образом:
Пример
<div class="container">
<h1>Несколько строк кода</h1>
<p>Для нескольких строк кода используйте элемент pre:</p>
<pre>
Текст в элементе pre
отображается моноширинным
шрифтом, и он сохраняет
как пробелы, так и
разрывы строк.
</pre>
</div>
Попробуйте сами »
Дополнительные классы типографики
В следующей таблице приведены примеры дополнительных классов типографики Bootstrap 5:
| Имя класса | Описание | Пример |
|---|---|---|
| .lead | Выделить абзац | Попробуйте сами |
| .small | Задает меньший размер текста (85% от родительского элемента) | Попробуйте сами |
| .text-start | Выравнивание по левому краю | Попробуйте сами |
| .text-center | По центру | Попробуйте сами |
| .text-end | Выравнивание по правому краю | Попробуйте сами |
| .text-justify | Задает выравнивание текста; текст в абзаце, превышающий ширину экрана, автоматически переносится. | Попробуйте сами |
| .text-nowrap | Текст в абзаце, превышающий ширину экрана, не переносится. | Попробуйте сами |
| .text-lowercase | Преобразовать текст в нижний регистр | Попробуйте сами |
| .text-uppercase | Преобразовать текст в верхний регистр | Попробуйте сами |
| .text-capitalize | Делает первую букву каждого слова заглавной | Попробуйте сами |
| .initialism | Текст внутри элемента <abbr> отображается уменьшенным шрифтом и может преобразовывать строчные буквы в прописные. | Попробуйте сами |
| .list-unstyled | Удаляет стиль списка по умолчанию, а элементы списка выравниваются по левому краю (в <ul> и <ol>). Этот класс применяется только к непосредственно вложенным элементам списка. (Если нужно удалить стиль у вложенных элементов списка, необходимо применить этот стиль к вложенному списку.) | Попробуйте сами |
| .list-inline | Размещает все элементы списка на одной строке | Попробуйте сами |