Bootstrap 多媒體對象（Media Object）

時間 2019-11-19

標籤 bootstrap 多媒體對象 media object 欄目 Bootstarp 简体版

原文原文鏈接

本章咱們將講解 Bootstrap 中的多媒體對象（Media Object）。這些抽象的對象樣式用於建立各類類型的組件（好比：博客評論），咱們能夠在組件中使用圖文混排，圖像能夠左對齊或者右對齊。媒體對象能夠用更少的代碼來實現媒體對象與文字的混排。php

媒體對象輕量標記、易於擴展的特性是經過向簡單的標記應用 class 來實現的。你能夠在 HTML 標籤中添加如下兩種形式來設置媒體對象：css

.media：該 class 容許將媒體對象裏的多媒體（圖像、視頻、音頻）浮動到內容區塊的左邊或者右邊。html
.media-list：若是你須要一個列表，各項內容是無序列表的一部分，能夠使用該 class。可用於評論列表與文章列表。jquery

讓咱們來看看下面這個有關默認的媒體對象 .media 的實例：bootstrap

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 默認的媒體對象</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/images/64.jpg" 
      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="/images/64.jpg" 
      alt="媒體對象">
   </a>
   <div class="media-body">
      <h4 class="media-heading">媒體標題</h4>
      這是一些示例文本。這是一些示例文本。 
      這是一些示例文本。這是一些示例文本。
	  這是一些示例文本。這是一些示例文本。
	  這是一些示例文本。這是一些示例文本。
	  這是一些示例文本。這是一些示例文本。
      <div class="media">
         <a class="pull-left" href="#">
            <img class="media-object" src="/images/64.jpg" 
            alt="媒體對象">
         </a>
         <div class="media-body">
            <h4 class="media-heading">媒體標題</h4>
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。 
            這是一些示例文本。這是一些示例文本。
			這是一些示例文本。這是一些示例文本。
         </div>
      </div>
   </div>
</div>

</body>
</html>

嘗試一下 »spa

結果以下所示：code

讓咱們來看看下面這個有關媒體對象列表 .media-list 的實例：orm

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 媒體對象列表</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="media-list">
   <li class="media">
      <a class="pull-left" href="#">
         <img class="media-object" src="/images/64.jpg" 
         alt="通用的佔位符圖像">
      </a>
      <div class="media-body">
         <h4 class="media-heading">媒體標題</h4>
         <p>這是一些示例文本。這是一些示例文本。 
			這是一些示例文本。這是一些示例文本。
			這是一些示例文本。這是一些示例文本。
			這是一些示例文本。這是一些示例文本。
			這是一些示例文本。這是一些示例文本。</p>
         <!-- 嵌套的媒體對象 -->
         <div class="media">
            <a class="pull-left" href="#">
               <img class="media-object" src="/images/64.jpg" 
               alt="通用的佔位符圖像">
            </a>
            <div class="media-body">
               <h4 class="media-heading">嵌套的媒體標題</h4>
               這是一些示例文本。這是一些示例文本。
			   這是一些示例文本。這是一些示例文本。
			   這是一些示例文本。這是一些示例文本。
			   這是一些示例文本。這是一些示例文本。
			   這是一些示例文本。這是一些示例文本。
               <!-- 嵌套的媒體對象 -->
               <div class="media">
                  <a class="pull-left" href="#">
                     <img class="media-object" src="/images/64.jpg" 
                     alt="通用的佔位符圖像">
                  </a>
                  <div class="media-body">
                     <h4 class="media-heading">嵌套的媒體標題</h4>
                     這是一些示例文本。這是一些示例文本。
					 這是一些示例文本。這是一些示例文本。
					 這是一些示例文本。這是一些示例文本。
					 這是一些示例文本。這是一些示例文本。
					 這是一些示例文本。這是一些示例文本。
                  </div>
               </div>
            </div>
         </div>
         <!-- 嵌套的媒體對象 -->
         <div class="media">
            <a class="pull-left" href="#">
               <img class="media-object" src="/images/64.jpg" 
               alt="通用的佔位符圖像">
            </a>
            <div class="media-body">
               <h4 class="media-heading">嵌套的媒體標題</h4>
               這是一些示例文本。這是一些示例文本。
			   這是一些示例文本。這是一些示例文本。
			   這是一些示例文本。這是一些示例文本。
			   這是一些示例文本。這是一些示例文本。
			   這是一些示例文本。這是一些示例文本。
            </div>
         </div>
      </div>
   </li>
   <li class="media">
      <a class="pull-right" href="#">
         <img class="media-object" src="/images/64.jpg" 
         alt="通用的佔位符圖像">
      </a>
      <div class="media-body">
         <h4 class="media-heading">媒體標題</h4>
         這是一些示例文本。這是一些示例文本。
		 這是一些示例文本。這是一些示例文本。
		 這是一些示例文本。這是一些示例文本。
		 這是一些示例文本。這是一些示例文本。
		 這是一些示例文本。這是一些示例文本。
      </div>
   </li>
</ul>

</body>
</html>

嘗試一下 »視頻

結果以下所示：htm

原文地址：http://www.phplearn.cn/bootstrap/bootstrap-media-object.html