Typography & Text Utilities trong Bootstrap

Typography đóng vai trò quan trọng trong thiết kế giao diện web, giúp nội dung dễ đọc và chuyên nghiệp hơn. Bootstrap cung cấp nhiều tiện ích giúp định dạng văn bản nhanh chóng mà không cần viết CSS tùy chỉnh.

1. Điều chỉnh văn bản với Bootstrap

Kích thước chữ (.fs-*)

• .fs-1 → Kích thước lớn nhất
• .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 → Giảm dần

Ví dụ:

<p class="fs-1">Đây là chữ rất lớn</p>
<p class="fs-3">Chữ cỡ trung bình</p>
<p class="fs-6">Chữ nhỏ</p>

Độ đậm (.fw-*)

• .fw-bold → Chữ đậm
• .fw-semibold → Chữ bán đậm
• .fw-normal → Chữ bình thường
• .fw-light → Chữ mảnh

Ví dụ:

<p class="fw-bold">Chữ đậm</p>
<p class="fw-light">Chữ mảnh</p>

Kiểu chữ

• .text-uppercase → Viết hoa toàn bộ
• .text-lowercase → Viết thường toàn bộ
• .text-capitalize → Viết hoa chữ cái đầu mỗi từ
• .text-muted → Chữ mờ nhạt

Ví dụ:

<p class="text-uppercase">viết hoa tất cả</p>
<p class="text-lowercase">VIẾT THƯỜNG TẤT CẢ</p>
<p class="text-capitalize">viết hoa chữ cái đầu</p>
<p class="text-muted">Chữ mờ nhạt</p>

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

Căn chỉnh ngang

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

Ví dụ:

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

Căn chỉnh theo thiết bị (.text-sm-*, .text-md-*, .text-lg-*)

Bootstrap cho phép thay đổi căn chỉnh văn bản theo từng kích thước màn hình.

Ví dụ:

<p class="text-md-center text-lg-end">Căn giữa trên màn hình trung bình, căn phải trên màn hình lớn</p>

3. Bài tập thực hành

Yêu cầu:
Tạo danh sách nội dung với các kiểu chữ khác nhau, sử dụng Bootstrap Typography.

Ví dụ:

<div class="container">
    <h2 class="fs-2 fw-bold text-center">Tiêu đề chính</h2>
    <p class="fs-5 text-muted text-center">Mô tả ngắn với chữ mờ</p>
    
    <ul>
        <li class="fw-semibold text-capitalize">danh sách item 1</li>
        <li class="fw-light text-uppercase">danh sách item 2</li>
        <li class="fw-bold text-lowercase">DANH SÁCH ITEM 3</li>
    </ul>
</div>

4. Kết luận

Qua bài học này, bạn đã nắm vững cách sử dụng Bootstrap Typography để định dạng và căn chỉnh văn bản nhanh chóng. Hãy thực hành để tạo giao diện đẹp mắt và chuyên nghiệp hơn!