Tekst/FORMATOWANIE 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。

Przykład

Spróbuj sam

如果需要，您还可以在其他元素上使用 .h1 到 .h6 类，使它们表现为标题：

Przykład

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

Spróbuj sam

display 标题

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

Przykład

Spróbuj sam

<small>

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

Przykład

Spróbuj sam

Bootstrap 5 użyje tła żółtego i pewnych wewnętrznych marginesów do ustawienia

Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 Bootstrap 5 użyje tła żółtego i pewnych wewnętrznych marginesów do ustawienia <mark> i .mark

Przykład

Spróbuj sam

Bootstrap 5 ustawi styl HTML

Styl: Bootstrap 5 ustawi styl HTML <abbr>

Przykład

Spróbuj sam

<blockquote>

. Kiedy cytuj treść z innych źródeł, ustaw styl elementu .blockquote Klasa dodaj do <blockquote>. Kiedy wymieniasz źródło, na przykład "Strona z World Wildlife Fund", użyj .blockquote-footer Klasa:

Przykład

Spróbuj sam

<dl>

Bootstrap 5 ustawi HTML <dl> Styl elementu:

Przykład

Spróbuj sam

<code>

Bootstrap 5 ustawi HTML <code> Styl elementu:

Przykład

Spróbuj sam

<kbd>

Bootstrap 5 ustawi HTML <kbd> Styl elementu:

Przykład

Spróbuj sam

<pre>

Bootstrap 5 ustawi HTML <pre> Styl elementu:

Przykład

Spróbuj sam

Więcej klas formatowania

Poniższe klasy Bootstrap 5 można dodatkowo dodać do stylów elementów HTML:

Klasa Opis Przykład
.lead Wyróżnij akapit. Spróbuj
.text-left Określ tekst wyrównany do lewej strony. Spróbuj
.text-break Zapobiegaj uszkodzeniu układu długiego tekstu. Spróbuj
.text-center Określ tekst wyrównany do środka. Spróbuj
.text-decoration-none Usuń podkreślenie z linków. Spróbuj
.text-end Określ tekst wyrównany do prawej strony. Spróbuj
.text-nowrap Określ tekst bez wcięć. Spróbuj
.text-lowercase Określ tekst w małych literach. Spróbuj
.text-uppercase Określ tekst w dużych literach. Spróbuj
.text-capitalize Określ tekst w dużych literach. Spróbuj
.initialism Wyświetl tekst wewnątrz elementu <abbr> w mniejszym fontu. Spróbuj
.list-unstyled Usuń domyślny list-style i lewy margines zewnętrzny listy (dotyczy <ul> i <ol>).
Ten styl stosuje się wyłącznie do bezpośrednich elementów potomnych listy.
Jeśli chcesz usunąć domyślny styl listy z jakichkolwiek wciętych list, zastosuj ten styl również do wciętych list.		 Spróbuj
.list-inline Umieść wszystkie pozycje listy w jednym wierszu.
Używaj razem z .list-inline-item dla każdego elementu <li>.		 Spróbuj