IMG-LOGO
Trang Chủ Chủ Đề Bootstrap 4 Media Objects
× 1) Bootstrap 4 - Giới Thiệu 2) Bootstrap 4 Containers 3) Bootstrap 4 Grids 4) Bootstrap 4 Text/Typography 5) Bootstrap 4 Colors 6) Bootstrap 4 Tables 7) Bootstrap 4 Images 8) Bootstrap 4 Jumbotron 9) Bootstrap 4 Alerts 10) Bootstrap 4 Buttons 11) Bootstrap 4 Button Groups 12) Bootstrap 4 Badges 13) Bootstrap 4 Progress Bars 14) Bootstrap 4 Spinners 15) Bootstrap 4 Pagination 16) Bootstrap 4 List Groups 17) Bootstrap 4 Cards 18) Bootstrap 4 Dropdowns 19) Bootstrap 4 Collapse 20) Bootstrap 4 Navs 21) Bootstrap 4 Navigation Bar 22) Bootstrap 4 Forms 23) Bootstrap 4 Form Inputs 24) Bootstrap 4 Inputs Group 25) Bootstrap 4 Custom Forms 26) Bootstrap 4 Carousel 27) Bootstrap 4 Modal 28) Bootstrap 4 Tooltip 29) Bootstrap 4 Popover 30) Bootstrap 4 Toast 31) Bootstrap 4 Scrollspy (Advanced) 32) Bootstrap 4 Utilities 33) Bootstrap 4 Flex 34) Bootstrap 4 Icons 35. Bootstrap 4 Media Objects 36) Bootstrap 4 Filters (Advanced) 37) Bootstrap 4 - Form đăng ký tài khoản người dùng

Bootstrap 4 Media Objects

by GokiSoft.Com - 19:26 12/10/2020 1,570 Lượt Xem

Media Objects

Bootstrap cung cấp một cách dễ dàng để căn chỉnh các media object (như images hoặc videos) cùng với nội dung. Media objects thường được sử dụng để hiển thị các bình luận blog, tweet và hơn thế nữa:


Basic Media Object

Để tạo một media object, add class .media cho phần tử container, và đặt media content bên trong phần tử child của container với class .media-body. Add padding và margins nếu cần với các class tiện ích về khoảng cách:

Ví dụ

<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

Media objects cũng có thể lồng nhau (media object trong media object):

Để lồng media objects, đặt một phần tử container .media bên trong .media-body của container cha:

Ví dụ

<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

Để right-align media image, add image sau container .media-body như ví dụ dưới đây:

Ví dụ

<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 hoặc Bottom Alignment

Sử dụng các tiện ích flex, các class align-self-* để đặt media object ở top, middle hoặc bottom:

Ví dụ

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

Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!