NTM Solutions

Facebook Youtube Google+

Thứ Tư, 5 tháng 4, 2017

Tự học Bootstrap - Cơ bản - bài 26 - Đối tượng Media

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>

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>



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