Bootstrap 4 - Bootstrap Media Objects
Bootstrap Media Objects
Trong bài học dưới đây Hiepsiit sẽ giới thiệu cho bạn về Media Object trong Bootstrap.
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:
<div class="media">
<img src="images/avatar.svg" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Jhon Carter <small><i>Posted on January 10, 2019</i></small></h5>
<p>This is really an excellent feature! I love it. One day I'm definitely going to use this Bootstrap media object component into my application.</p>
</div>
</div>
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:
<div class="media">
<img src="images/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Jhon Carter <small><i>Posted on January 10, 2019</i></small></h5>
<p>This is really an excellent feature! I love it. One day I'm definitely going to use this Bootstrap media object component into my application.</p>
</div>
</div>
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:
<div class="media">
<img src="images/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Jhon Carter <small><i>Posted on January 10, 2019</i></small></h5>
<p>This is really an excellent feature! I love it. One day I'm definitely going to use this Bootstrap media object component into my application.</p>
<!-- Nested media object -->
<div class="media mt-2">
<img src="images/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Clark Kent <small><i>Posted on January 12, 2019</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>
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:
<div class="media">
<div class="media-body">
<h5 class="mt-0">Jhon Carter <small><i>Posted on January 10, 2019</i></small></h5>
<p>This is really an excellent feature! I love it. One day I'm definitely going to use this Bootstrap media object component into my application.</p>
</div>
<img src="images/avatar.svg" class="ml-3" alt="Sample Image">
</div>
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:
<!--Top aligned media-->
<div class="media">
<img src="images/avatar.svg" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Top aligned media <small><i>This is Default</i></small></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
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:
<ul class="list-unstyled">
<li class="media">
<img src="images/avatar.svg" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">List-based media object</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
</div>
</li>
<li class="media my-2">
<img src="images/avatar.svg" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">List-based media object</h5>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p>
</div>
</li>
<li class="media">
<img src="images/avatar.svg" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">List-based media object</h5>
<p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</li>
</ul>