Bootstrap 5 Testo/Formato

Bootstrap 5 默认设置

Bootstrap 5 默认 font-size 为 1rem(默认为 16px),line-height 为 1.5。

此外,所有 <p> 元素都设置了 margin-top: 0 e margin-bottom: 1rem (默认为 16px)。

<h1> - <h6>

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

Esempio

Prova tu stesso

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

Esempio

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

Prova tu stesso

display 标题

display 标题用于比普通标题更突出(更大的 font-size 和更细的 font-weight),有六个类可供选择:.display-1.display-6

Esempio

Prova tu stesso

<small>

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

Esempio

Prova tu stesso

<mark>

Bootstrap 5 utilizzerà lo sfondo giallo e alcune margini interne per impostare <mark> e .mark del

Esempio

Prova tu stesso

Bootstrap 5 imposta lo stile HTML

del Bootstrap 5 imposta lo stile HTML <abbr>

Esempio

Prova tu stesso

<blockquote>

. Quando si cita il contenuto di un altro sorgente, impostare lo stile dell'elemento .blockquote Aggiungi la classe a <blockquote>. Quando si nomina la fonte, ad esempio "Dal sito web della World Wildlife Fund", utilizzare .blockquote-footer Classe:

Esempio

Prova tu stesso

<dl>

Bootstrap 5 imposta HTML <dl> Stile dell'elemento:

Esempio

Prova tu stesso

<code>

Bootstrap 5 imposta HTML <code> Stile dell'elemento:

Esempio

Prova tu stesso

<kbd>

Bootstrap 5 imposta HTML <kbd> Stile dell'elemento:

Esempio

Prova tu stesso

<pre>

Bootstrap 5 imposta HTML <pre> Stile dell'elemento:

Esempio

Prova tu stesso

Altre classi di composizione

Le seguenti classi Bootstrap 5 possono essere ulteriormente aggiunte allo stile degli elementi HTML:

Classe Descrizione Esempio
.lead Evidenzia il paragrafo. Prova tu stesso
.text-left Stabilisce il testo allineato a sinistra. Prova tu stesso
.text-break Previene che i testi lunghi distruggano la disposizione. Prova tu stesso
.text-center Stabilisce il testo allineato al centro. Prova tu stesso
.text-decoration-none Rimuovi la sottolineatura dai link. Prova tu stesso
.text-end Stabilisce il testo allineato a destra. Prova tu stesso
.text-nowrap Stabilisce che il testo non venga a capo. Prova tu stesso
.text-lowercase Stabilisce il testo in minuscolo. Prova tu stesso
.text-uppercase Stabilisce il testo in maiuscolo. Prova tu stesso
.text-capitalize Stabilisce il testo in maiuscolo. Prova tu stesso
.initialism Visualizza il testo all'interno dell'elemento <abbr> in un carattere più piccolo. Prova tu stesso
.list-unstyled Rimuovi lo stile di lista predefinito e il margine esterno sinistro (applies to <ul> and <ol>).
Questo stile si applica solo ai sottoelenchi diretti.
Per rimuovere lo stile di lista predefinito da qualsiasi elenco nidificato, applicare anche questo stile agli elenchi nidificati.
Prova tu stesso
.list-inline Metti tutte le voci della lista in una riga.
Utilizzare insieme a .list-inline-item su ogni elemento <li>.
Prova tu stesso