Bootstrap 5 văn bản/thiết kế

Bootstrap 5 默认设置

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

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

<h1> - <h6>

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

Mẫu

Thử thử ngay lập tức

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

Mẫu

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

Thử thử ngay lập tức

display 标题

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

Mẫu

Thử thử ngay lập tức

<small>

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

Mẫu

Thử thử ngay lập tức

<mark>

Bootstrap 5 sẽ sử dụng màu nền vàng và một số khoảng cách nội bộ để thiết lập <mark> và .mark sao cho:

Mẫu

Thử thử ngay lập tức

<abbr>

Bootstrap 5 sẽ thiết lập樣式 của HTML <abbr> phần tử với đường viền dưới dạng gạch chéo và con trỏ hỏi khi悬停:

Mẫu

Thử thử ngay lập tức

<blockquote>

Khi trích dẫn nội dung khối từ nguồn khác, hãy thiết lập樣式 của .blockquote loại thêm vào <blockquote>Khi đề cập đến nguồn gốc, chẳng hạn như "Từ trang web của Quỹ Thế giới Tự nhiên", hãy sử dụng .blockquote-footer Loại:

Mẫu

Thử thử ngay lập tức

<dl>

Bootstrap 5 sẽ thiết lập HTML <dl> Kiểu dáng của phần tử:

Mẫu

Thử thử ngay lập tức

<code>

Bootstrap 5 sẽ thiết lập HTML <code> Kiểu dáng của phần tử:

Mẫu

Thử thử ngay lập tức

<kbd>

Bootstrap 5 sẽ thiết lập HTML <kbd> Kiểu dáng của phần tử:

Mẫu

Thử thử ngay lập tức

<pre>

Bootstrap 5 sẽ thiết lập HTML <pre> Kiểu dáng của phần tử:

Mẫu

Thử thử ngay lập tức

Các loại lát in thêm

Các loại Bootstrap 5 dưới đây có thể thêm vào样式中 của phần tử HTML:

Loại Mô tả Ví dụ
.lead Nổi bật đoạn văn. Thử thử
.text-left Định nghĩa văn bản canh trái. Thử thử
.text-break Ngăn chặn văn bản dài phá hủy bố cục. Thử thử
.text-center Định nghĩa văn bản canh giữa. Thử thử
.text-decoration-none Loại bỏ đường viền dưới liên kết. Thử thử
.text-end Định nghĩa văn bản canh phải. Thử thử
.text-nowrap Định nghĩa văn bản không tự động chuyển dòng. Thử thử
.text-lowercase Định nghĩa văn bản in thường. Thử thử
.text-uppercase Định nghĩa văn bản in hoa. Thử thử
.text-capitalize Định nghĩa văn bản in hoa. Thử thử
.initialism Hiển thị văn bản trong <abbr> phần tử với字号 nhỏ hơn. Thử thử
.list-unstyled Loại bỏ danh sách mặc định list-style và lề bên trái (áp dụng cho <ul> và <ol>).
Loại này chỉ áp dụng cho mục danh sách con trực tiếp.
Nếu cần loại bỏ樣式 danh sách mặc định từ bất kỳ danh sách đệm nào, cũng hãy áp dụng loại này cho danh sách đệm.		 Thử thử
.list-inline Đặt tất cả các mục danh sách trên một dòng.
Vui lòng sử dụng cùng với .list-inline-item trên mỗi <li> phần tử.		 Thử thử