Bài 29: Media Objects – Đối tượng Media trong Bootstrap 4

0
142

Hello các bạn, hôm nay trong series học Bootstrap 4, mình sẽ đến với chủ đề Đối tượng Media trong Bootstrap 4 nhé. Từ những bài này, chúng ta sẽ học những kiến thức Bootstrap nâng cao hơn nhưng áp dụng khá nhiều trên web đó, nên các bạn cố gắng theo dõi những bài viết cuối cùng trong series này nhé.

Làm việc với đối tượng Media

Bootstrap cung cấp cho chúng ta những cách thức hết sức dễ dàng để căn chỉnh các đối tượng media như: hình ảnh, video, … cùng với nội dung.

Các đối tượng Media thường được sử dụng để hiển thị các bình luận comment trên blog, ở các mẫu tin, …

Media Object cơ bản

Để tạo đối tượng Media trong các định dạng, các bạn thêm class .media vào thẻ tổng, và vị trí đặt media và nội dung ở bên trong, sử dụng class .media-body cho phần nôi dung (thêm padding, margin nếu cần).

Ví dụ:

Hiển thị:

Các đối tượng Media lồng nhau

Media Object cho phép lồng các đối tượng media vào nhau.

Trong class .media-body lại lồng class mới .media vào, và làm tương tự.

Ví dụ:

Hiển thị:

Căn ảnh hiển thị sang phải

Để căn chỉnh ảnh sang phải, các bạn đặt hình ảnh sau vùng sử dụng class .media-body là được.

Ví dụ:

Căn chỉnh vị trí ảnh ở trên, giữa, dưới

Sử dụng class .align-self-* để đặt vị trí hình ảnh ở trên, giữa hoặc dưới. * được thay thế bằng các giá trị:

  • start: ở trên
  • center: ở giữa
  • end: ở dưới

Ví dụ:

Kết luận

OK, như vậy là đã xong phần định dạng các đối tượng Media trên website với Bootstrap 4 rồi, đây là 1 bài rất hữu ích cho các bạn muốn làm những định dạng bình luận cho blog, hay hiển thị các thông tin đi kèm với hình ảnh.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây