Bootstrap objek multimedia

Bab ini kita akan membahas Bootstrap objek multimedia. Ini gaya objek abstrak dianjurkan untuk berbagai jenis komponen (misalnya: blog komentar), kita dapat menggunakan foto-teks dalam komponen, gambar dapat dibiarkan dibenarkan atau kanan dibenarkan. objek media dapat menggunakan sedikit kode untuk mengimplementasikan objek multimedia dan berebut teks.

Anda dapat menambahkan dua bentuk berikut dalam tag HTML untuk mengatur objek media:

• .media: Kelas ini memungkinkan objek media dalam multimedia (gambar, video) float ke kiri atau ke blok konten yang tepat.
• .media-list: Jika Anda membutuhkan daftar berbagai elemen adalah bagian dari daftar unordered, Anda dapat menggunakan kelas. Komentar dapat digunakan untuk daftar dan daftar artikel.

Sekarang mari kita lihat contoh dari menggunakan multimedia objek kelas .media:

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

Lihat contoh online

Contoh di atas menunjukkan efek berikut:

Sekarang mari kita lihat contoh dari menggunakan multimedia objek kelas .media-daftar:

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

Lihat contoh online

Contoh di atas menunjukkan efek berikut: