Текст/верстка Bootstrap 5

Bootstrap 5 默认设置

Bootstrap 5 默认 font-size 为 1rem（默认为 16px），line-height 为 1.5。

此外，所有 <p> 元素都设置了 margin-top: 0 <mark> margin-bottom: 1rem （默认为 16px）。

<h1> - <h6>

Bootstrap 5 把 HTML 标题（<h1> 到 <h6>）的样式设置为有更粗的 font-weight 以及响应式的 font-size。

Пример

Попробуйте сами

如果需要，您还可以在其他元素上使用 .h1 到 .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>

Попробуйте сами

display 标题

display 标题用于比普通标题更突出（更大的 font-size 和更细的 font-weight），有六个类可供选择：.display-1 到 .display-6：

Пример

Попробуйте сами

<small>

在 Bootstrap 5 中，HTML <small> 元素（和 .small 用于在任何标题中创建较小的辅助文本：

Пример

Попробуйте сами

Bootstrap 5 будет использовать желтый цвет фона и некоторые внутренние отступы для установки

Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 Bootstrap 5 будет использовать желтый цвет фона и некоторые внутренние отступы для установки <mark> и .mark

Пример

Попробуйте сами

Bootstrap 5 установит стиль HTML

Стиль: Bootstrap 5 установит стиль HTML <abbr>

Пример

Попробуйте сами

<blockquote>

. Когда цитируется контент другого источника, установите стиль элемента с нижней пунктирной рамкой и курсором в виде вопроса при наведении: .blockquote Класс добавить к <blockquote>. Когда указывается источник, например, "с сайта Всемирного фонда дикой природы", используйте .blockquote-footer Класс:

Пример

Попробуйте сами

<dl>

Bootstrap 5 установит HTML <dl> Стиль элемента:

Пример

Попробуйте сами

<code>

Bootstrap 5 установит HTML <code> Стиль элемента:

Пример

Попробуйте сами

<kbd>

Bootstrap 5 установит HTML <kbd> Стиль элемента:

Пример

Попробуйте сами

<pre>

Bootstrap 5 установит HTML <pre> Стиль элемента:

Пример

Попробуйте сами

Более многообразные стили排版

Ниже перечислены классы Bootstrap 5, которые можно добавить к стилям HTML элементов:

Класс Описание Пример
.lead Выделение абзаца. Попробуйте
.text-left Определяет текст с выравниванием по левому краю. Попробуйте
.text-break Предотвращает破坏 макета длинного текста. Попробуйте
.text-center Определяет текст с выравниванием по центру. Попробуйте
.text-decoration-none Удалите подчеркивание из ссылок. Попробуйте
.text-end Определяет текст с правым выравниванием. Попробуйте
.text-nowrap Определяет текст без перевода строк. Попробуйте
.text-lowercase Определяет текст с строчными буквами. Попробуйте
.text-uppercase Определяет текст с заглавными буквами. Попробуйте
.text-capitalize Определяет текст с заглавными буквами. Попробуйте
.initialism Отображайте текст в элементе <abbr> с более мелким шрифтом. Попробуйте
.list-unstyled Удалите стандартный list-style и левый отступ для элементов списка (для <ul> и <ol>).
Этот стиль применяется только к прямым потомкам списка.
Если нужно удалить стандартный список стилей из любого вложенного списка, также примените этот стиль к вложенным спискам.		 Попробуйте
.list-inline Разместите все элементы списка в одном ряду.
Используйте вместе с каждым <li> элементом и .list-inline-item.		 Попробуйте