Đối tượng phương tiện Bootstrap 4
Đối tượng truyền thông
Bootstrap cung cấp một cách dễ dàng để căn chỉnh các đối tượng đa phương tiện (như hình ảnh hoặc 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 blog, tweet, v.v.:
John Doe Đăng vào ngày 19 tháng 2 năm 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
John Doe Đăng vào ngày 20 tháng 2 năm 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Đối tượng truyền thông cơ bản
John Doe Đăng vào ngày 19 tháng 2 năm 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Để tạo đối tượng phương tiện, hãy thêm lớp .media
vào phần tử vùng chứa và đặt nội dung phương tiện bên trong vùng chứa con với lớp .media-body
. Thêm phần đệm và lề nếu cần, với các tiện ích giãn cách:
Ví dụ
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
Hãy tự mình thử »Đối tượng phương tiện lồng nhau
Các đối tượng phương tiện cũng có thể được lồng vào nhau (một đối tượng phương tiện bên trong một đối tượng phương tiện):
John Doe Đăng vào ngày 19 tháng 2 năm 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Jane Doe Đăng vào ngày 20 tháng 2 năm 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Để lồng các đối tượng phương tiện, hãy đặt một thùng chứa .media
mới bên trong thùng chứa .media-body
:
Ví dụ
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
Hãy tự mình thử »Hình ảnh phương tiện được căn phải
John Doe Đăng vào ngày 19 tháng 2 năm 2016
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Để căn phải hình ảnh phương tiện, hãy thêm hình ảnh sau vùng chứa .media-body
:
Ví dụ
<div class="media border p-3">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
Hãy tự mình thử »Căn chỉnh trên, giữa hoặc dưới
Sử dụng các tiện ích flex, các lớp align-self-*
để đặt đối tượng media lên trên cùng, giữa hoặc dưới cùng:
Phương tiện truyền thông hàng đầu
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Trung tâm truyền thông
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Đáy phương tiện
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Ví dụ
<!-- Media top -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Hãy tự mình thử »