Media Object trong Bootstrap, khái niệm và cách sử dụng

Trong bài học dưới đây Taimienphi.vn sẽ giới thiệu cho bạn về Media Object trong Bootstrap, ngoài ra bạn đọc có thể tham khảo thêm một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu thêm về Card trong Bootstrap.

Để tìm hiểu chi tiết cách sử dụng Media Object trong Bootstrap, bạn đọc cùng tham khảo tiếp bài học Bootstrap dưới đây của Taimienphi.vn.

media object trong bootstrap

Tìm hiểu Media Object trong Bootstrap

 

Mục Lục bài viết:
1. Sử dụng Media Object trong Bootstrap
2. Tạo Media Object lồng nhau
3. Căn chỉnh Media Object trong Bootstrap
4. Tạo Media List trong Bootstrap

 

1. Sử dụng Media Object trong Bootstrap

Giả sử nếu muốn tạo bố cục có chứa media object (đối tượng đa phương tiện) được căn trái hoặc căn phải, chẳng hạn như hình ảnh hoặc video bên cạnh các nội dung là văn bản, chẳng hạn như bình luận trên blog, Tweet, ... . Để làm được điều này chúng ta sử dụng Media Object trong Bootstrap.

Ví dụ: trong ví dụ dưới đây sử dụng Media Object trong Bootstrap để tạo bố cục chứa đối tượng đa phương tiện bên cạnh các nội dung văn bản:

media object trong bootstrap

Kết quả trả về có dạng như dưới đây:

media object trong bootstrap 2

Ngoài ra chúng ta cũng có thể tạo các biến thể khác nhau của thành phần media bằng cách áp dụng các lớp sửa đổi hình ảnh như .rounded hoặc .rounded-circle để tạo ảnh hình tròn, như trong ví dụ dưới đây:

media object trong bootstrap 3

Kết quả trả về có dạng như dưới đây:

media object trong bootstrap 4

 

2. Tạo Media Object lồng nhau

Media object trong Bootstrap cũng có thể lồng nhau, tức là Media object này có thể lồng trong Media object khác. Tùy chọn này hữu ích để tạo chủ đề bình luận trong một bài đăng trên blog.

Ví dụ: ví dụ dưới đây minh họa cách tạo Media Object lồng nhau trong Bootstrap:

media object trong bootstrap 5

Kết quả trả về có dạng như dưới đây:

media object trong bootstrap 6

 

3. Căn chỉnh Media Object trong Bootstrap

Để căn chỉnh nội dung văn bản và nội dung đa phương tiện (hình ảnh) theo chiều ngang, chúng ta chỉ cần tinh chỉnh mã HTML như trong ví dụ dưới đây:

media object trong bootstrap 7

Kết quả trả về có dạng như dưới đây:

media object trong bootstrap 8

Ngoài ra chúng ta cũng có thể căn chỉnh hình ảnh hoặc các đối tượng đa phương tiện khác ở chính giữa hoặc góc dưới cùng các khối nội dung bằng cách sử dụng các lớp tiện ích flexbox. Chẳng hạn sử dụng lớp .align-self-center để căn chỉnh nội dung theo chiều dọc và lớp .align-self-end để căn chỉnh nội dung ở góc dưới. Mặc định, các nội dung đa phương tiện trong media object được căn chỉnh ở đầu, tham khảo ví dụ dưới đây:

media object trong bootstrap 9

Kết quả trả về có dạng như dưới đây:

media object trong bootstrap 10

 

4. Tạo Media List trong Bootstrap

Để tạo media list trong Bootstrap, chúng ta sử dụng các phần tử danh sách trong HTML và các lớp media object. Chỉ cần áp dụng lớp .list-unstyled trên các phần tử ul hoặc ol, và lớp .media trên phần tử con li.

Ví dụ: Ví dụ dưới đây minh họa cách tạo media list trong Bootstrap:

media object trong bootstrap 11

Kết quả trả về có dạng như dưới đây:

media object trong bootstrap 12

https://thuthuat.taimienphi.vn/media-object-trong-bootstrap-51121n.aspx
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn về Media Object trong Bootstrap, trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về biểu tượng trong Bootstrap.

Tác giả: Hoàng Bách     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Cài đặt môi trường C
Lớp và đối tượng trong C#
Pagination trong Bootstrap, cách tạo và sử dụng
Hằng và cách sử dụng hằng trong C#
Tab và Pill trong Bootstrap
Từ khoá liên quan:

Media Object trong Bootstrap

, Bootstrap, học Bootstrap,

SOFT LIÊN QUAN
  • Lập trình C++

    Giáo trình lập trình C++

    Lập trình C++ là tài liệu hướng dẫn học lập trình C++ - ngôn ngữ lập trình hướng đối tượng mở rộng từ ngôn ngữ C, cung cấp đến bạn các kiến thức về cách thức và tư duy lập trình. Đây là tài liệu rất hữu ích cho những ai ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá