首页 » Bootstrap » Bootstrap 布局组件
网站地图

Bootstrap 多媒体对象（Media Object）

本章我们将讲解 Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：

  • .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
  • .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

让我们来看看下面这个有关默认的媒体对象 .media 的实例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 默认的媒体对象</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div class="media">
  12.    <a class="pull-left" href="#">
  13.       <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
  14.       alt="媒体对象">
  15.    </a>
  16.    <div class="media-body">
  17.       <h4 class="media-heading">媒体标题</h4>
  18.       这是一些示例文本。这是一些示例文本。 
  19.       这是一些示例文本。这是一些示例文本。
  20. 	  这是一些示例文本。这是一些示例文本。
  21. 	  这是一些示例文本。这是一些示例文本。
  22. 	  这是一些示例文本。这是一些示例文本。
  23.    </div>
  24. </div>
  25. <div class="media">
  26.    <a class="pull-left" href="#">
  27.       <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
  28.       alt="媒体对象">
  29.    </a>
  30.    <div class="media-body">
  31.       <h4 class="media-heading">媒体标题</h4>
  32.       这是一些示例文本。这是一些示例文本。 
  33.       这是一些示例文本。这是一些示例文本。
  34. 	  这是一些示例文本。这是一些示例文本。
  35. 	  这是一些示例文本。这是一些示例文本。
  36. 	  这是一些示例文本。这是一些示例文本。
  37.       <div class="media">
  38.          <a class="pull-left" href="#">
  39.             <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
  40.             alt="媒体对象">
  41.          </a>
  42.          <div class="media-body">
  43.             <h4 class="media-heading">媒体标题</h4>
  44.             这是一些示例文本。这是一些示例文本。
  45.             这是一些示例文本。这是一些示例文本。
  46.             这是一些示例文本。这是一些示例文本。 
  47.             这是一些示例文本。这是一些示例文本。
  48. 			这是一些示例文本。这是一些示例文本。
  49.          </div>
  50.       </div>
  51.    </div>
  52. </div>
  53.  
  54. </body>
  55. </html>

结果如下所示：

默认的媒体对象

让我们来看看下面这个有关媒体对象列表 .media-list 的实例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 媒体对象列表</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <ul class="media-list">
  12.    <li class="media">
  13.       <a class="pull-left" href="#">
  14.          <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
  15.          alt="通用的占位符图像">
  16.       </a>
  17.       <div class="media-body">
  18.          <h4 class="media-heading">媒体标题</h4>
  19.          <p>这是一些示例文本。这是一些示例文本。 
  20. 			这是一些示例文本。这是一些示例文本。
  21. 			这是一些示例文本。这是一些示例文本。
  22. 			这是一些示例文本。这是一些示例文本。
  23. 			这是一些示例文本。这是一些示例文本。</p>
  24.          <!-- 嵌套的媒体对象 -->
  25.          <div class="media">
  26.             <a class="pull-left" href="#">
  27.                <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
  28.                alt="通用的占位符图像">
  29.             </a>
  30.             <div class="media-body">
  31.                <h4 class="media-heading">嵌套的媒体标题</h4>
  32.                这是一些示例文本。这是一些示例文本。
  33. 			   这是一些示例文本。这是一些示例文本。
  34. 			   这是一些示例文本。这是一些示例文本。
  35. 			   这是一些示例文本。这是一些示例文本。
  36. 			   这是一些示例文本。这是一些示例文本。
  37.                <!-- 嵌套的媒体对象 -->
  38.                <div class="media">
  39.                   <a class="pull-left" href="#">
  40.                      <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
  41.                      alt="通用的占位符图像">
  42.                   </a>
  43.                   <div class="media-body">
  44.                      <h4 class="media-heading">嵌套的媒体标题</h4>
  45.                      这是一些示例文本。这是一些示例文本。
  46. 					 这是一些示例文本。这是一些示例文本。
  47. 					 这是一些示例文本。这是一些示例文本。
  48. 					 这是一些示例文本。这是一些示例文本。
  49. 					 这是一些示例文本。这是一些示例文本。
  50.                   </div>
  51.                </div>
  52.             </div>
  53.          </div>
  54.          <!-- 嵌套的媒体对象 -->
  55.          <div class="media">
  56.             <a class="pull-left" href="#">
  57.                <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
  58.                alt="通用的占位符图像">
  59.             </a>
  60.             <div class="media-body">
  61.                <h4 class="media-heading">嵌套的媒体标题</h4>
  62.                这是一些示例文本。这是一些示例文本。
  63. 			   这是一些示例文本。这是一些示例文本。
  64. 			   这是一些示例文本。这是一些示例文本。
  65. 			   这是一些示例文本。这是一些示例文本。
  66. 			   这是一些示例文本。这是一些示例文本。
  67.             </div>
  68.          </div>
  69.       </div>
  70.    </li>
  71.    <li class="media">
  72.       <a class="pull-right" href="#">
  73.          <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
  74.          alt="通用的占位符图像">
  75.       </a>
  76.       <div class="media-body">
  77.          <h4 class="media-heading">媒体标题</h4>
  78.          这是一些示例文本。这是一些示例文本。
  79. 		 这是一些示例文本。这是一些示例文本。
  80. 		 这是一些示例文本。这是一些示例文本。
  81. 		 这是一些示例文本。这是一些示例文本。
  82. 		 这是一些示例文本。这是一些示例文本。
  83.       </div>
  84.    </li>
  85. </ul>
  86.  
  87. </body>
  88. </html>

结果如下所示：

媒体对象列表