Bootstrap 4 Media Objects(Đối tượng phương tiện Bootsatrap 4)

0
11

Media Objects

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) với nội dung. Đối tượng phương tiện thường được sử dụng để hiển thị bình luận blog, tweet, v.v.

Để tạo một đối tượng media, hãy thêm lớp .media vào một phần tử vùng chứa và đặt nội dung phương tiện bên trong một vùng chứa con với lớp .media-body. Thêm đệm và lề nếu cần, với các tiện ích giãn cách:

<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>

Nested Media Objects

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).

-Để lồng các đối tượng phương tiện, hãy đặt một vùng chứa .media mới bên trong vùng chứa .media-body:

<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>

Right-Aligned Media Image

-Để căn phải hình ảnh đa phương tiện, hãy thêm hình ảnh vào sau vùng chứa .media-bod:

<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>

Top, Middle or Bottom Alignment

<!-- 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>

Sử dụng các tiện ích flex, các lớp align-self- * để đặt đối tượng media ở trên cùng, giữa hoặc ở dưới cùng:

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây