Typography là một phần không thể thiếu trong thiết kế web, ảnh hưởng trực tiếp đến trải nghiệm người dùng. Bootstrap 5 cung cấp các class tiện ích (utility classes) mạnh mẽ để định dạng và tối ưu hóa văn bản, giúp tạo ra giao diện đẹp và dễ đọc mà không cần viết CSS phức tạp. Trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách sử dụng các class Typography của Bootstrap 5 để cải thiện và định dạng nội dung một cách chuyên nghiệp.

1. Tổng quan về Typography trong Bootstrap 5

Typography trong Bootstrap 5 bao gồm các class tiện ích cho phép bạn định dạng kích thước chữ, căn chỉnh, độ đậm, kiểu chữ, và màu sắc của văn bản. Những class này giúp văn bản hiển thị rõ ràng và dễ đọc trên mọi thiết bị, hỗ trợ người dùng dễ dàng tiếp cận nội dung.

2. Các class Typography cơ bản trong Bootstrap 5

Display Headings

Class display là các class tiêu đề lớn giúp tạo điểm nhấn cho trang, thường được dùng cho các tiêu đề chính hoặc những thông tin cần nổi bật.

• display-1 đến display-6: Tạo các kích thước tiêu đề từ lớn nhất (display-1) đến nhỏ nhất (display-6).

Ví dụ:

<h1 class="display-1">Tiêu đề lớn</h1>
<h2 class="display-2">Tiêu đề lớn thứ hai</h2>

Lead Text

Class Lead làm cho đoạn văn có kích thước lớn hơn và nổi bật, thường được dùng cho phần mở đầu hoặc đoạn văn quan trọng.

<p class="lead">Đây là đoạn văn nổi bật, dễ đọc và có kích thước lớn hơn.</p>

Inline Text Elements

Bootstrap 5 cung cấp các class tiện ích cho các yếu tố văn bản nội tuyến (inline text):

• Bold và Italic: fw-bold, fw-normal, fst-italic, fst-normal giúp bạn dễ dàng làm đậm hoặc in nghiêng văn bản.
• Text Transformation: text-uppercase, text-lowercase, text-capitalize để chuyển đổi chữ hoa, chữ thường hoặc viết hoa chữ cái đầu tiên của từng từ.

Ví dụ:

<p class="fw-bold">Đoạn văn in đậm</p>
<p class="fst-italic">Đoạn văn in nghiêng</p>
<p class="text-uppercase">Chữ in hoa toàn bộ</p>

3. Căn chỉnh văn bản

Bootstrap 5 hỗ trợ các class căn chỉnh văn bản giúp bố trí nội dung dễ dàng theo nhiều kiểu:

• text-start: Căn lề trái.
• text-center: Căn giữa.
• text-end: Căn lề phải.

Ví dụ:

<p class="text-start">Căn lề trái</p>
<p class="text-center">Căn giữa</p>
<p class="text-end">Căn lề phải</p>

4. Kích thước chữ

Bạn có thể dễ dàng điều chỉnh kích thước văn bản với các class fs-* từ fs-1 (lớn nhất) đến fs-6 (nhỏ nhất).

<p class="fs-1">Kích thước văn bản lớn nhất</p>
<p class="fs-3">Kích thước văn bản trung bình</p>
<p class="fs-6">Kích thước văn bản nhỏ nhất</p>

5. Màu sắc văn bản

Bootstrap 5 cung cấp các class màu sắc văn bản tương ứng với bảng màu của Bootstrap:

• Primary: text-primary
• Secondary: text-secondary
• Success: text-success
• Danger: text-danger
• Warning: text-warning
• Info: text-info
• Light: text-light
• Dark: text-dark
• Muted: text-muted

Ví dụ:

<p class="text-primary">Văn bản màu chủ đạo (Primary)</p>
<p class="text-danger">Văn bản màu đỏ (Danger)</p>

6. Text Decoration và Text Reset

Bạn có thể tạo gạch chân hoặc xóa bỏ định dạng của văn bản bằng các class text-decoration-underline, text-decoration-line-through hoặc text-decoration-none.

<p class="text-decoration-underline">Văn bản gạch chân</p>
<p class="text-decoration-line-through">Văn bản gạch ngang</p>
<p class="text-decoration-none">Xóa bỏ mọi trang trí</p>

7. Căn chỉnh văn bản với line-height và text-wrap

• Line Height: Sử dụng các class như lh-1, lh-sm, lh-base, lh-lg để điều chỉnh khoảng cách giữa các dòng.
• Text Wrap và Text Truncate:
  • text-wrap: Cho phép văn bản tự động ngắt dòng.
  • text-nowrap: Buộc văn bản không ngắt dòng.
  • text-truncate: Cắt ngắn văn bản nếu văn bản vượt quá không gian của phần tử chứa.

Ví dụ:

<p class="lh-lg">Văn bản có line-height lớn hơn, giúp dễ đọc hơn khi có nhiều dòng.</p>
<p class="text-nowrap">Văn bản không ngắt dòng.</p>
<p class="text-truncate" style="width: 150px;">Văn bản sẽ bị cắt ngắn nếu vượt quá giới hạn.</p>

8. Kết luận

Typography trong Bootstrap 5 là một công cụ mạnh mẽ để định dạng và điều chỉnh văn bản mà không cần CSS tùy chỉnh. Sử dụng các class tiện ích Typography giúp bạn tạo giao diện đẹp mắt và tối ưu hóa trải nghiệm đọc cho người dùng trên mọi thiết bị. Hãy áp dụng các class này trong các dự án của bạn để nâng cao chất lượng và tính thẩm mỹ của nội dung website!