4.17.1　默认样式

一组媒体的默认使用方式通常包括如下几个样式：media、media-object、media-body、media-heading 4个样式，和一个用于控制左右浮动的pull-left（或pull-right）样式。示例代码如下：

  1. <div class="media">
  2.     <a class="pull-left" href="#">
  3.         <img class="media-object" src="..." />
  4.     </a>
  5.     <div class="media-body">
  6.         <h4 class="media-heading">Media heading</h4>
  7.         ...     
  8.         <!-- 嵌套的media对象 -->
  9.         <div class="media">
  10.             ...
  11.         </div>
  12.     </div>
  13. </div>

上述示例的运行效果如图4-79所示。

媒体对象的样式相对比较简单，主要是设置各个样式的间距大小和左右浮动。源码如下：

4.17.1　默认样式 - 图1 图4-79　媒体对象运行效果

  1. // 源码4583行
  2. .media,
  3. .media-body {
  4.   overflow: hidden;                     /* 超出显示区域则隐藏 */
  5.   zoom: 1;
  6. }
  7. .media,
  8. .media .media {
  9.   margin-top: 15px;                     /* 设置每个媒体对象（或嵌套媒体）的顶部间距 */
  10. }
  11. .media:first-child {  margin-top: 0;    /* 第一个媒体对象，不设置顶部间距 */ }
  12. .media-object {  display: block;                /* 针对的媒体对象object设置为块状显示 */ }
  13. .media-heading {  margin: 0 0 5px;      /* 媒体对象标题，设置5像素的底部间距 */ }
  14. .media > .pull-left {  margin-right: 10px;      /* 左浮动，保留10像素的右间距 */ }
  15. .media > .pull-right {  margin-left: 10px;      /* 右浮动，保留10像素的左间距 */ }