Γραφή/Τυπογραφία του 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>Όταν ονομάζετε την πηγή, όπως "Από τον ιστότοπο του World Wildlife Fund", χρησιμοποιήστε .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 Αφαιρέστε την προεπιλεγμένη μορφοποίηση λίστας και τον αριστερό εξωτερικό περιθώριο (εφαρμόζεται στα <ul> και <ol>).
Αυτό το είδος ισχύει μόνο για άμεσα υποκατατάκτες στοιχεία.
Για να αφαιρεθεί η προεπιλεγμένη μορφοποίηση λίστας από οποιαδήποτε υποκατατάξη λίστας, εφαρμόστε επίσης αυτό το είδος στη υποκατατάξη λίστας.		 Δοκιμάστε το
.list-inline Τοποθετήστε όλα τα στοιχεία της λίστας σε μια γραμμή.
Χρησιμοποιήστε το με κάθε <li> στοιχείο της .list-inline-item.		 Δοκιμάστε το