Bootstrap - Đối tượng phương tiện

Chương này thảo luận về đối tượng Media. Đây là các kiểu đối tượng trừu tượng để xây dựng các loại thành phần khác nhau (như nhận xét blog, Tweet, v.v.) có hình ảnh căn trái hoặc căn phải cùng với nội dung văn bản. Mục tiêu của đối tượng media là làm cho mã phát triển các khối thông tin này ngắn hơn đáng kể.

Mục tiêu của các đối tượng phương tiện (đánh dấu nhẹ, khả năng mở rộng dễ dàng) đạt được bằng cách áp dụng các lớp cho một số đánh dấu đơn giản. Đối tượng media có hai dạng:

.media - Lớp này cho phép thả nổi một đối tượng media (hình ảnh, video và âm thanh) sang trái hoặc phải của một khối nội dung.
.media-list- Nếu bạn đang chuẩn bị một danh sách trong đó các mục sẽ là một phần của danh sách không có thứ tự, hãy sử dụng một lớp. hữu ích cho các chủ đề bình luận hoặc danh sách bài viết.

Hãy để chúng tôi xem một ví dụ bên dưới về đối tượng phương tiện mặc định -

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
   </div>
</div>

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      
      <div class = "media">
         <a class = "pull-left" href = "#">
            <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
         </a>
         
         <div class = "media-body">
            <h4 class = "media-heading">Media heading</h4>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </div>
      </div>
   </div>
</div>

Hãy để chúng tôi xem một ví dụ về danh sách phương tiện -

<ul class = "media-list">
   <li class = "media">
      <a class = "pull-left" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
			
         <p>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </p>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               
               <!-- Nested media object -->
               <div class = "media">
                  <a class = "pull-left" href = "#">
                     <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                        alt = "Generic placeholder image">
                  </a>
                  
                  <div class = "media-body">
                     <h4 class = "media-heading">Nested media heading</h4>
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                  </div>
               </div>
            </div>
         </div>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg"
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
            </div>
         </div>
      </div>
   </li>
   
   <li class = "media">
      <a class = "pull-right" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" 
            alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
      </div>
   </li>
</ul>