Buzz
Để tìm hiểu chi tiết về cách sử dụng Media Object trong Bootstrap, hãy theo dõi bài học Bootstrap dưới đây từ Mytour.
Khám phá thế giới của Media Object trong Bootstrap
1. Khám phá 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. Khám phá Sử dụng Media Object trong Bootstrap
Giả sử bạn muốn tạo một bố cục với đối tượng đa phương tiện (media object) được căn trái hoặc phải, chẳng hạn như hình ảnh hoặc video kèm theo nội dung văn bản như bình luận trên blog, Tweet, ... . Để thực hiện điều này, chúng ta sử dụng Media Object trong Bootstrap.
Ví dụ: Trong ví dụ dưới đây, chúng ta áp dụng Media Object trong Bootstrap để tạo bố cục chứa đối tượng đa phương tiện cùng với nội dung văn bản:
Dưới đây là kết quả bạn sẽ nhận được:
Hơn nữa, chúng ta có thể sáng tạo các biến thể khác nhau cho 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 hình ảnh hình tròn, như thấy trong ví dụ dưới đây:
Kết quả cuối cùng sẽ có dạng như sau:
2. Tạo Media Object lồng nhau
Media object trong Bootstrap cũng có thể được lồng nhau, nghĩa là một Media object có thể nằm bên trong một Media object khác. Lựa chọn này rất hữu ích khi muốn tạo chủ đề bình luận trong một bài đăng trên blog.
Ví dụ: Dưới đây là một ví dụ minh họa cách tạo Media Object lồng nhau trong Bootstrap:
Dưới đây là kết quả bạn sẽ nhận được:
3. Căn chỉnh Media Object trong Bootstrap
Để điều chỉnh nội dung văn bản và đa phương tiện (hình ảnh) theo chiều ngang, chỉ cần chỉnh sửa mã HTML như trong ví dụ sau đây:
Dưới đây là kết quả bạn sẽ nhận được:
Bên cạnh đó, bạn cũng có thể canh chỉnh hình ảnh hoặc các đối tượng đa phương tiện khác ở giữa hoặc góc dưới cùng của các khối nội dung bằng cách sử dụng các lớp tiện ích flexbox. Ví dụ, 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 để đưa nội dung về góc dưới. Mặc định, các đối tượng đa phương tiện trong media object được canh chỉnh ở phía trên, tham khảo ví dụ sau:
Dưới đây là kết quả bạn sẽ nhận được:
4. Tạo Danh Sách Media trong Bootstrap
Để tạo danh sách media 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 cho các phần tử ul hoặc ol, và lớp .media cho phần tử con li.
Ví dụ: Dưới đây là minh họa cách tạo danh sách media trong Bootstrap:
Dưới đây là kết quả bạn sẽ nhận được:
Trên đây là bài học mới của Mytour về Media Object trong Bootstrap. Hãy đón chờ bài học tiếp theo với chủ đề biểu tượng trong Bootstrap.
