Trong hướng dẫn này, bạn sẽ học cách tạo các đối tượng media trong Bootstrap.
Đối tượng media trong Bootstrap đã bị ngừng cung cấp từ phiên bản 5. Tuy nhiên, bạn vẫn có thể tạo bố cục chứa đối tượng media được căn trái hoặc phải như hình ảnh hoặc video cùng với nội dung văn bản như bình luận blog, Tweet, v.v. bằng cách sử dụng các lớp tiện ích bo tròn và khoảng cách.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể tạo các biến thể khác của đối tượng media. Áp dụng các lớp sửa đổi hình ảnh như .rounded
hoặc .rounded-circle
cho hình ảnh để tạo hình ảnh bo góc tròn hoặc hình tròn.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="images/avatar.svg" class="rounded-circle" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Các đối tượng media cũng có thể được lồng vào bên trong đối tượng media khác. Nó có thể rất hữu ích để tạo các chủ đề bình luận trong một bài đăng trên blog. Hãy xem một ví dụ:
<div class="d-flex">
<div class="flex-shrink-0">
<img src="images/avatar.svg" class="rounded-circle" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
<!-- Nested media object -->
<div class="d-flex mt-4">
<div class="flex-shrink-0">
<img src="images/avatar.svg" class="rounded-circle" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Clark Kent <small class="text-muted"><i>Posted on January 12, 2021</i></small></h5>
<p>Thanks, you found this component useful. Don't forget to check out other Bootstrap components as well. They're also very useful.</p>
</div>
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể thay đổi căn chỉnh theo chiều ngang của nội dung và media chỉ bằng cách điều chỉnh chính mã HTML, như được minh họa trong ví dụ sau:
<div class="d-flex">
<div class="flex-grow-1 me-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
<div class="flex-shrink-0">
<img src="images/avatar.svg" alt="Sample Image">
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bên cạnh đó, bạn cũng có thể căn chỉnh hình ảnh hoặc media khác ở giữa hoặc dưới cùng của khối nội dung bằng cách sử dụng các lớp tiện ích flexbox, ví dụ: bạn có thể sử dụng lớp .align-self-center
để căn giữa theo chiều dọc và lớp .align-self-end
cho căn chỉnh dưới cùng.
Theo mặc định, media bên trong đối tượng media được căn trên cùng. Đây là một ví dụ:
<!--Top aligned media-->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Top aligned media <small class="text-muted"><i>This is Default</i></small></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
<hr>
<!--Middle aligned media-->
<div class="d-flex">
<div class="flex-shrink-0 align-self-center">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Middle Aligned Media</h5>
<p>Vestibulum quis quam ut magna consequat faucibus aleo...</p>
</div>
</div>
<hr>
<!--Bottom aligned media-->
<div class="d-flex">
<div class="flex-shrink-0 align-self-end">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Bottom Aligned Media</h5>
<p>Amet nibh libero, in gravida nulla. Nulla vel metus...</p>
</div>
</div>
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.