Teks/Perubahan Bootstrap 5

Bootstrap 5 默认设置

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

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

<h1> - <h6>

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

Contoh

Coba sendiri

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

Contoh

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

Coba sendiri

display 标题

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

Contoh

Coba sendiri

<small>

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

Contoh

Coba sendiri

<mark>

Bootstrap 5 akan menggunakan warna latar belakang kuning dan beberapa jarak internal untuk menetapkan <mark> dan .mark dengan

Contoh

Coba sendiri

Bootstrap 5 akan menetapkan gaya HTML

dengan Bootstrap 5 akan menetapkan gaya HTML <abbr>

Contoh

Coba sendiri

<blockquote>

. saat mengutip konten blok dari sumber lain, atur gaya elemen .blockquote kelas untuk ditambahkan ke <blockquote>. saat menamakan sumber, seperti "Dari situs World Wildlife Fund", gunakan .blockquote-footer Kelas:

Contoh

Coba sendiri

<dl>

Bootstrap 5 akan menetapkan HTML <dl> Gaya elemen:

Contoh

Coba sendiri

<code>

Bootstrap 5 akan menetapkan HTML <code> Gaya elemen:

Contoh

Coba sendiri

<kbd>

Bootstrap 5 akan menetapkan HTML <kbd> Gaya elemen:

Contoh

Coba sendiri

<pre>

Bootstrap 5 akan menetapkan HTML <pre> Gaya elemen:

Contoh

Coba sendiri

Kelas penataan lainnya

Kelas Bootstrap 5 di bawah ini dapat ditambahkan lebih lanjut ke gaya elemen HTML:

Kelas Deskripsi Contoh
.lead Teks paragraf yang disorot. Coba sendiri
.text-left Tentukan teks untuk berada di sebelah kiri. Coba sendiri
.text-break Mencegah teks yang panjang mengganggu tata letak. Coba sendiri
.text-center Tentukan teks untuk berada di tengah. Coba sendiri
.text-decoration-none Hapus garis bawah di dalam tautan. Coba sendiri
.text-end Tentukan teks untuk berada di sebelah kanan. Coba sendiri
.text-nowrap Tentukan teks untuk tidak melompat baris. Coba sendiri
.text-lowercase Tentukan teks kecil. Coba sendiri
.text-uppercase Tentukan teks kapital. Coba sendiri
.text-capitalize Tentukan teks kapital. Coba sendiri
.initialism Tampilkan teks dalam elemen <abbr> dengan font yang lebih kecil. Coba sendiri
.list-unstyled Hapus gaya daftar standar dan marjin luar kiri list-item (berlaku untuk <ul> dan <ol>).
Gaya ini hanya berlaku untuk item daftar anak langsung.
Untuk menghapus gaya daftar standar dari daftar yang terdapat di dalam, lakukan pula penggunaan gaya ini untuk daftar yang terdapat di dalam.		 Coba sendiri
.list-inline Letakkan semua item daftar di baris tunggal.
Gunakan bersamaan dengan .list-inline-item untuk setiap elemen <li>.		 Coba sendiri