Đối tượng phương tiện Bootstrap
Đối tượng phương tiện
Bootstrap cung cấp một cách dễ dàng để căn chỉnh các đối tượng phương tiện (như hình ảnh hoặc video) ở bên trái hoặc bên phải của một số nội dung. Điều này có thể đượ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
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Jane Doe Đã đăng vào ngày 20 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Alicia Keyes Đăng vào ngày 25 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn. Không có sợ sô cô la trước hoặc không có hứng thú.
Đối tượng phương tiện cơ bản
John Doe
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
John Doe
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Thí 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>
Giải thích ví dụ
Sử dụng phần tử <div> với .medialớp để tạo vùng chứa cho các đối tượng phương tiện.
Sử dụng .media-leftlớp để căn chỉnh đối tượng phương tiện (hình ảnh) ở bên trái hoặc .media-rightlớp để căn chỉnh nó ở bên 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-headingcho các tiêu đề.
Căn chỉnh trên cùng, giữa hoặc dưới cùng
Đố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 media-tophoặc media-middlelớp media-bottom:
Phương tiện hàng đầu
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Phương tiện Trung gian
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Phần dưới Phương tiện
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Thí 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>
Làm tổ các đối tượng phương tiện
Các đối tượng media cũng có thể được lồng vào nhau (một đối tượng media bên trong đối tượng media):
Thí dụ
John Doe Đăng vào ngày 19 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
John Doe Đăng vào ngày 20 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
John Doe Đăng vào ngày 21 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Một ví dụ khác về làm tổ
Thí dụ
John Doe Đăng vào ngày 19 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
John Doe Đăng vào ngày 20 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
John Doe Đăng vào ngày 21 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Jane Doe Đã đăng vào ngày 20 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.
Jane Doe Đăng vào ngày 19 tháng 2 năm 2016
Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn.