Bootstrap 5 Testo/Formato
- Pagina precedente Base della griglia BS5
- Pagina successiva Colori BS5
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
如果需要,您还可以在其他元素上使用 .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>
display 标题
display 标题用于比普通标题更突出(更大的 font-size 和更细的 font-weight),有六个类可供选择:.display-1
到 .display-6
:
Esempio
<mark>
Bootstrap 5 utilizzerà lo sfondo giallo e alcune margini interne per impostare <mark>
e .mark
del
Esempio
Bootstrap 5 imposta lo stile HTML
del Bootstrap 5 imposta lo stile HTML
<abbr>
Esempio
<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
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 |
- Pagina precedente Base della griglia BS5
- Pagina successiva Colori BS5