Typography trong Bootstrap 5: Trong Bootstrap 5, “Typography” là một phần quan trọng giúp bạn tạo ra văn bản hiển thị một cách hấp dẫn và dễ đọc trên trang web của mình. Bootstrap cung cấp các lớp và kiểu dáng để tùy chỉnh font chữ, kích thước chữ, định dạng và các yếu tố khác liên quan đến văn bản. Dưới đây là một số ví dụ về cách sử dụng Typography trong Bootstrap 5:
1. Lớp Display:
Lớp display-{size} cho phép bạn thiết lập kích thước chữ lớn cho các phần tử tiêu đề hoặc chữ in đậm.
html
<p class="display-1">Display 1 Text</p>
<p class="display-2">Display 2 Text</p>
<p class="display-3">Display 3 Text</p>
<p class="display-4">Display 4 Text</p>
2. Lớp Lead:
Lớp lead giúp làm nổi bật đoạn văn bản mở đầu, thường được sử dụng cho các đoạn giới thiệu.
html
<p class="lead">This is a lead paragraph for emphasis.</p>
3. Lớp Text:
Các lớp text-{alignment} giúp căn chỉnh văn bản theo các hướng: left, center, right, justify.
html
<p class="text-left">Left-aligned text.</p>
<p class="text-center">Center-aligned text.</p>
<p class="text-right">Right-aligned text.</p>
<p class="text-justify">Justified text.</p>
4. Lớp Font Weight:
Các lớp fw-{weight} giúp thiết lập độ đậm của font chữ.
html
<p class="fw-light">Light weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-bold">Bold weight text.</p>
5. Lớp Text Color:
Các lớp text-{color} cho phép bạn thiết lập màu chữ.
html
<p class="text-primary">Primary color text.</p>
<p class="text-success">Success color text.</p>
<p class="text-danger">Danger color text.</p>
6. Lớp Font Size:
Các lớp fs-{size} cho phép bạn tùy chỉnh kích thước chữ.
html
<p class="fs-1">Font size 1</p>
<p class="fs-2">Font size 2</p>
<p class="fs-3">Font size 3</p>
<p class="fs-4">Font size 4</p>
7. Lớp Blockquote:
Lớp blockquote được sử dụng để hiển thị các đoạn trích dẫn.
html
<blockquote class="blockquote">
<p>This is a blockquote text.</p>
<footer class="blockquote-footer">Someone famous</footer>
</blockquote>
Đây chỉ là một số ví dụ cơ bản về cách sử dụng Typography trong Bootstrap 5. Bootstrap cung cấp nhiều lớp và kiểu dáng khác để tùy chỉnh văn bản theo mong muốn của bạn. Bạn có thể tìm hiểu thêm thông tin trong tài liệu chính thức của Bootstrap.