Objek multimedia Bootstrap


Bootstrap Multimedia Object (Media Object)

Dalam bab ini kita akan menerangkan objek multimedia (Media Object) dalam Bootstrap. Gaya objek abstrak ini digunakan untuk mencipta pelbagai jenis komponen (seperti ulasan blog Kita boleh menggunakan grafik dan teks bercampur dalam komponen, dan imej boleh dijajarkan ke kiri atau kanan). Objek media boleh digunakan untuk mencampurkan objek media dan teks dengan kod yang kurang.

Penanda yang ringan dan kebolehlanjutan objek media yang mudah dicapai dengan menggunakan kelas pada penandaan mudah. Anda boleh menambah dua bentuk berikut pada teg HTML untuk menetapkan objek media:

  • .media: Kelas ini membenarkan anda menambah multimedia (imej, video) dalam objek media , audio) terapung ke kiri atau kanan blok kandungan.

  • .senarai media: Jika anda memerlukan senarai di mana setiap item adalah sebahagian daripada senarai tidak tersusun, anda boleh menggunakan kelas ini. Boleh digunakan untuk senarai komen dan senarai artikel.

Mari kita lihat contoh berikut bagi objek media lalai .media:

Instance

rreee

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Mari kita lihat contoh senarai objek media berikut.media- senarai:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的媒体对象</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" 
      alt="媒体对象">
   </a>
   <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。 
      这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
   </div>
</div>
<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" 
      alt="媒体对象">
   </a>
   <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。 
      这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
      <div class="media">
         <a class="pull-left" href="#">
            <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" 
            alt="媒体对象">
         </a>
         <div class="media-body">
            <h4 class="media-heading">媒体标题</h4>
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。 
            这是一些示例文本。这是一些示例文本。
			这是一些示例文本。这是一些示例文本。
         </div>
      </div>
   </div>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian