Bootstrap - Tỷ lệ: Hiểu và Thực hiện Tỷ lệ Phản hồi

Xin chào các bạn đang học phát triển web! Hôm nay, chúng ta sẽ khám phá một tính năng thú vị của Bootstrap giúp làm cho các trang web của bạn trông tinh tế và chuyên nghiệp: Công cụ Tỷ lệ Bootstrap. Cuối cùng của bài hướng dẫn này, bạn sẽ tạo được nội dung phản hồi, tỷ lệ hoàn hảo như một chuyên gia!

Bootstrap - Ratio

Tỷ lệ Bootstrap là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu chúng ta đang nói về điều gì. Công cụ Tỷ lệ Bootstrap là một công cụ mạnh mẽ giúp bạn duy trì tỷ lệ一致的 cho nội dung của bạn, bất kể kích thước màn hình. Hãy tưởng tượng nó như một hộp kỳ diệu giữ cho hình ảnh, video hoặc bất kỳ nội dung nào của bạn luôn ở tỷ lệ hoàn hảo, bất kể bạn thay đổi kích thước cửa sổ trình duyệt như thế nào.

Tại sao điều này lại quan trọng?

Hãy tưởng tượng bạn đang tạo một bộ sưu tập ảnh. Bạn muốn tất cả các ảnh của mình đều là hình vuông, nhưng chúng có kích thước khác nhau. Nếu không có công cụ tỷ lệ, bạn sẽ phải cắt ảnh thủ công hoặc sử dụng CSS phức tạp. Tỷ lệ Bootstrap làm cho nhiệm vụ này trở nên dễ dàng!

Bắt đầu với Tỷ lệ Bootstrap

Đầu tiên, hãy chắc chắn rằng bạn đã bao gồm Bootstrap 5 trong dự án của mình. Nếu bạn chưa làm điều này, bạn có thể thêm liên kết sau vào phần <head> của HTML:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Bây giờ, hãy tạo ví dụ tỷ lệ đầu tiên của chúng ta!

Ví dụ Tỷ lệ Cơ bản

Dưới đây là một ví dụ đơn giản về cách sử dụng công cụ tỷ lệ:

<div class="ratio ratio-1x1">
<img src="your-image.jpg" alt="Một hình ảnh vuông">
</div>

Đang xảy ra điều gì ở đây? Hãy phân tích:

Chúng ta tạo một <div> với hai lớp: ratio và ratio-1x1.
Lớp ratio cho biết Bootstrap rằng chúng ta muốn sử dụng công cụ tỷ lệ.
Lớp ratio-1x1 chỉ định rằng chúng ta muốn tỷ lệ 1:1 (một hình vuông hoàn hảo).
Trong <div> này, chúng ta đặt nội dung của mình (trong trường hợp này, một hình ảnh).

Kết quả? Một hình ảnh vuông hoàn hảo duy trì hình dạng của nó trên bất kỳ kích thước màn hình nào. Rất tuyệt vời, phải không?

Khám phá Các Tùy chọn Tỷ lệ Khác

Bootstrap cung cấp nhiều lớp tỷ lệ được xác định trước. Hãy xem xét một số trong số chúng:

Lớp Tỷ lệ	Tỷ lệ
ratio-1x1	1:1
ratio-4x3	4:3
ratio-16x9	16:9
ratio-21x9	21:9

Dưới đây là cách bạn có thể sử dụng chúng:

<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video" allowfullscreen></iframe>
</div>

Mã này sẽ nhúng một video YouTube với tỷ lệ 16:9, hoàn hảo cho hầu hết các nội dung video hiện đại!

Tỷ lệ Tùy chỉnh

Nhưng nếu bạn cần một tỷ lệ không có trong danh sách xác định trước? Đừng lo lắng! Bootstrap có hỗ trợ bạn với tỷ lệ tùy chỉnh.

Để tạo tỷ lệ tùy chỉnh, bạn có thể sử dụng biến CSS --bs-aspect-ratio. Dưới đây là cách thực hiện:

<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>Đây là tỷ lệ 2:1</div>
</div>

Trong ví dụ này, chúng ta tạo một tỷ lệ 2:1 bằng cách đặt tỷ lệ là 50% (1 chia cho 2, nhân với 100).

Hãy thử cái gì đó khác thường hơn:

<div class="ratio" style="--bs-aspect-ratio: 75%;">
<div>Đây là tỷ lệ 4:3</div>
</div>

Điều này tạo ra một tỷ lệ 4:3, rất tốt cho nội dung TV cũ hoặc một số loại ảnh nhất định.

Ứng dụng Thực tế

Bây giờ chúng ta đã hiểu cơ bản, hãy xem xét một số ứng dụng thực tế:

Nhúng Video Phản hồi

<div class="ratio ratio-16x9">
<iframe src="https://player.vimeo.com/video/137857207" title="Vimeo video" allowfullscreen></iframe>
</div>

Mã này nhúng một video Vimeo duy trì tỷ lệ 16:9 trên tất cả các thiết bị. Không có video bị nén hoặc giãn!

Bộ sưu tập Ảnh

<div class="row">
<div class="col-md-4 mb-3">
<div class="ratio ratio-1x1">
<img src="square-image1.jpg" alt="Hình ảnh bộ sưu tập 1" class="object-fit-cover">
</div>
</div>
<div class="col-md-4 mb-3">
<div class="ratio ratio-1x1">
<img src="square-image2.jpg" alt="Hình ảnh bộ sưu tập 2" class="object-fit-cover">
</div>
</div>
<div class="col-md-4 mb-3">
<div class="ratio ratio-1x1">
<img src="square-image3.jpg" alt="Hình ảnh bộ sưu tập 3" class="object-fit-cover">
</div>
</div>
</div>

Mã này tạo ra một bộ sưu tập ảnh phản hồi với hình ảnh vuông. Lớp object-fit-cover đảm bảo rằng các hình ảnh.fill vào vuông mà không bị méo.

Cách tốt nhất và Lời khuyên

Chọn tỷ lệ phù hợp: Xem xét nội dung của bạn khi chọn tỷ lệ. Sử dụng 16:9 cho hầu hết các video, 1:1 cho ảnh hồ sơ hoặc ảnh theo phong cách Instagram, và 4:3 cho nội dung cũ hoặc một số loại ảnh nhất định.
Kết hợp với các lớp Bootstrap khác: Công cụ tỷ lệ hoạt động rất tốt với hệ thống lưới và các công cụ khác của Bootstrap. Thử nghiệm với các kết hợp để tạo ra các bố cục phức tạp, phản hồi.
Sử dụng tỷ lệ tùy chỉnh một cách tiết kiệm: Mặc dù tỷ lệ tùy chỉnh rất mạnh mẽ, nhưng hãy cố định tỷ lệ xác định trước khi có thể để duy trì tính nhất quán và dễ bảo trì.
Kiểm tra trên nhiều thiết bị: Luôn kiểm tra tỷ lệ của bạn trên các kích thước màn hình khác nhau để đảm bảo trải nghiệm người dùng tốt trên tất cả các thiết bị.

Kết luận

Chúc mừng! Bạn đã thành thạo nghệ thuật sử dụng công cụ Tỷ lệ của Bootstrap. Từ duy trì hình vuông hoàn hảo trong bộ sưu tập ảnh đến tạo nhúng video phản hồi, bạn đã có công cụ để giữ cho nội dung của mình trông tuyệt vời trên mọi thiết bị.

Nhớ rằng, phát triển web là về thực hành và thử nghiệm. Đừng ngại thử các tỷ lệ khác nhau và xem chúng ảnh hưởng như thế nào đến bố cục của bạn. Chúc may mắn và tỷ lệ của bạn luôn chính xác!

Credits: Image by storyset