Bootstrap 5 cung cấp thành phần Figures để dễ dàng hiển thị hình ảnh cùng với chú thích. Với Figures, bạn có thể trình bày hình ảnh kèm nội dung mô tả rõ ràng và chuyên nghiệp. Trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách sử dụng thành phần Figures trong Bootstrap 5 và các class tiện ích kèm theo để tối ưu hóa việc hiển thị hình ảnh trên trang web.

1. Figures trong Bootstrap 5 là gì?

Figures trong Bootstrap 5 là một thành phần đặc biệt giúp bạn hiển thị hình ảnh với chú thích. Thành phần này sử dụng thẻ <figure> và <figcaption> trong HTML, giúp tạo nên cấu trúc dễ hiểu và hỗ trợ SEO. Với Figures, bạn có thể thêm hình ảnh kèm chú thích, đảm bảo hình ảnh và văn bản đi kèm được trình bày gọn gàng.

2. Cấu trúc cơ bản của Figures

Cấu trúc cơ bản của Figures bao gồm thẻ <figure> chứa thẻ <img> và <figcaption> để hiển thị chú thích.

Ví dụ

html
Thử online
<figure class="figure">
    <img src="https://codetuthub.com/example/image/300x200.jpg" class="figure-img img-fluid rounded" alt="Hình ảnh mẫu">
    <figcaption class="figure-caption">Đây là chú thích cho hình ảnh.</figcaption>
</figure>

Trong ví dụ này:

  • figure: Class chính cho thành phần figure.
  • figure-img: Class để định dạng hình ảnh.
  • figure-caption: Class để định dạng chú thích cho hình ảnh.

3. Class img-fluid và rounded

  • img-fluid: Giúp hình ảnh tự động điều chỉnh kích thước để phù hợp với phần tử chứa, tránh việc hình ảnh bị tràn.
  • rounded: Bo tròn nhẹ các góc của hình ảnh, tạo cảm giác mềm mại và thẩm mỹ hơn.

Ví dụ hình ảnh responsive và bo tròn

html
Thử online
<figure class="figure">
    <img src="https://codetuthub.com/example/image/300x200.jpg" class="figure-img img-fluid rounded" alt="Hình ảnh bo tròn">
    <figcaption class="figure-caption">Hình ảnh được bo tròn và có kích thước linh hoạt.</figcaption>
</figure>

4. Vị trí của chú thích hình ảnh

Chú thích hình ảnh (figure-caption) có thể đặt ở bên dưới hoặc bên trên hình ảnh tùy vào nhu cầu hiển thị. Mặc định, chú thích sẽ nằm dưới hình ảnh.

Ví dụ chú thích trên và dưới hình ảnh

html
Thử online
<figure class="figure">
    <figcaption class="figure-caption">Chú thích ở trên hình ảnh.</figcaption>
    <img src="https://codetuthub.com/example/image/300x200.jpg" class="figure-img img-fluid rounded" alt="Hình ảnh với chú thích trên">
</figure>

<figure class="figure">
    <img src="https://codetuthub.com/example/image/300x200.jpg" class="figure-img img-fluid rounded" alt="Hình ảnh với chú thích dưới">
    <figcaption class="figure-caption">Chú thích ở dưới hình ảnh.</figcaption>
</figure>

Trong ví dụ này, chú thích có thể được đặt ở bất kỳ vị trí nào tùy thuộc vào nhu cầu trình bày.

5. Căn chỉnh chú thích

Bạn có thể sử dụng các class căn chỉnh trong Bootstrap như text-start, text-center, text-end để căn chỉnh chú thích theo ý muốn.

Ví dụ căn chỉnh chú thích

html
Thử online
<figure class="figure">
    <img src="https://codetuthub.com/example/image/300x200.jpg" class="figure-img img-fluid rounded" alt="Hình ảnh căn giữa chú thích">
    <figcaption class="figure-caption text-center">Chú thích được căn giữa.</figcaption>
</figure>

Trong ví dụ này, class text-center căn giữa chú thích dưới hình ảnh. Tương tự, bạn có thể dùng text-start để căn trái và text-end để căn phải.

6. Figures với màu sắc chú thích

Bootstrap 5 cho phép thêm màu sắc cho chú thích bằng các class màu sắc như text-muted, text-primary, text-danger, v.v. để làm nổi bật hoặc giảm độ chú ý cho chú thích.

Ví dụ chú thích màu sắc

html
Thử online
<figure class="figure">
    <img src="https://codetuthub.com/example/image/300x200.jpg" class="figure-img img-fluid rounded" alt="Hình ảnh với chú thích màu">
    <figcaption class="figure-caption text-muted">Chú thích với màu nhạt (Muted).</figcaption>
</figure>

Trong ví dụ này, class text-muted giúp làm chú thích trở nên nhẹ nhàng hơn, thường dùng cho các chú thích không quá quan trọng.

7. Figures kết hợp với thẻ Card

Figures có thể được sử dụng linh hoạt trong các thành phần khác, chẳng hạn như thẻ card. Bạn có thể đặt Figure trong Card để tạo nên bố cục hiển thị hình ảnh và mô tả ngắn gọn.

Ví dụ Figure trong Card

html
Thử online
<div class="card" style="width: 18rem;">
    <figure class="figure">
        <img src="https://codetuthub.com/example/image/300x200.jpg" class="figure-img img-fluid card-img-top rounded" alt="Hình ảnh trong thẻ">
        <figcaption class="figure-caption text-center">Chú thích cho hình ảnh trong thẻ Card.</figcaption>
    </figure>
    <div class="card-body">
        <h5 class="card-title">Tiêu đề thẻ</h5>
        <p class="card-text">Đây là nội dung của thẻ, mô tả ngắn gọn về hình ảnh.</p>
    </div>
</div>

Trong ví dụ này, Figure được đặt trong thẻ Card, tạo nên bố cục hiển thị hình ảnh và chú thích gọn gàng, giúp người xem dễ dàng tiếp nhận thông tin.

8. Kết luận

Figures trong Bootstrap 5 là thành phần hữu ích giúp bạn hiển thị hình ảnh với chú thích rõ ràng và chuyên nghiệp. Với các class tiện ích như figure, figure-img, và figure-caption, bạn có thể dễ dàng tối ưu hóa cách trình bày hình ảnh trên trang web của mình. Sử dụng Figures kết hợp với các class căn chỉnh, màu sắc, và kiểu dáng sẽ giúp bạn tạo nên giao diện ấn tượng và thân thiện với người dùng.