Các đối tượng Media
Bootstrap
cung cấp 01 cách canh lề các đối tượng media (như hình
ảnh hoặc videos) ở bên trái hay bên phải nội dung.
Thường được dùng để hiển thị bình luận trong blog
, tweets...
Đối
tượng Media cơ bản
Canh
trái
Canh
phải
<!--
Canh trái
-->
<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>
<!-- Canh phải -->
<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>
<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>
<!-- Canh phải -->
<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 01 thẻ <div> với lớp
.media
để
tạo 01 vật chứa các đối tượng media.
Sử
dụng lớp
.media-left
để
canh lề đối tượng media (hình ảnh) bên trái, hoặc lớp
.media-right
để
canh lề phải.
Văn
bản nên xuất hiện kế bên hình ảnh, được đặt bên
trong 01 vật chứa với lớp ="
media-body".
Hơn
nữa, bạn có thể dùng lớp
.media-heading
đối
với phần tiêu đề.Canh lề vị trí đỉnh, giữa hoặc đáy
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>
<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>
Phân cấp các đối tượng Media
Các
đối tượng Media cũng có thể phân cấp (01 đối tượng
media bên trong 01 đối tượng media khác):
Ví dụ:
<h2>Nested Media Objects</h2>
<p>Media objects can also be
nested (a media object inside a media object):</p><br>
<div class="media">
<div class="media-left">
<img src="hinh\xinh.jpg"
class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">John
Doe <small><i>Posted on February 19,
2016</i></small></h4>
<p>Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="hinh\chi
pu.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4
class="media-heading">John Doe <small><i>Posted
on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<!-- Nested media object
-->
<div class="media">
<div class="media-left">
<img src="hinh\linh
miu.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4
class="media-heading">John Doe <small><i>Posted
on February 19, 2016</i></small></h4>
<p>Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Ví dụ khác về phân cấp đối tượng Media
<h2>Nested Media Objects</h2>
<p>Media objects can also be
nested (a media object inside a media object):</p><br>
<div class="media">
<div class="media-left">
<img src="hinh\xinh.jpg"
class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">John
Doe <small><i>Posted on February 19,
2016</i></small></h4>
<p>Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="hinh\chi
pu.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4
class="media-heading">John Doe <small><i>Posted
on February 20, 2016</i></small></h4>
<p>Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<!-- Nested media object
-->
<div class="media">
<div class="media-left">
<img src="hinh\phuong
trinh.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4
class="media-heading">John Doe <small><i>Posted
on February 21, 2016</i></small></h4>
<p>Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="hinh\linh
miu.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4
class="media-heading">Jane Doe <small><i>Posted
on February 20, 2016</i></small></h4>
<p>Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="hinh\xinh.jpg"
class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4
class="media-heading">Jane Doe <small><i>Posted
on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48
Không có nhận xét nào:
Đăng nhận xét