Đối tượng truyền thông Bootstrap
Đố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) sang trái hoặc phải của một số nội dung. Điều này có thể được sử dụng để hiển thị nhận xét 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.
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.
Alicia Keyes Đăng vào ngày 25 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. Nulla vel metus scelerisque ante sollitudin commododo.
Đối tượng truyền thông cơ bản
John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Ví dụ
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
Hãy tự mình thử »Ví dụ giải thích
Sử dụng phần tử <div> với lớp .media để tạo vùng chứa cho các đối tượng phương tiện.
Sử dụng lớp .media-left để căn chỉnh đối tượng phương tiện (hình ảnh) sang trái hoặc lớp .media-right để căn chỉnh nó sang phải.
Văn bản sẽ xuất hiện bên cạnh hình ảnh, được đặt bên trong vùng chứa có class=" media-body ".
Ngoài ra, bạn có thể sử dụng .media-heading cho tiêu đề.
Căn chỉnh trên, giữa hoặc dưới
Đối tượng media cũng có thể được căn chỉnh trên cùng, giữa hoặc dưới cùng với lớp media-top , media-middle hoặc media-bottom :
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">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</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):
Ví dụ
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.
John Doe Đăng vào ngày 21 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.
Một ví dụ khác về lồng nhau
Ví dụ
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.
John Doe Đăng vào ngày 21 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.
Jane 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.
