Bootstrap 媒体对象

媒体对象

媒体对象是一类具有特殊版式的组件，用来设计图文混排的效果，它们多是由一幅向左或向右浮动的图像和一些文本构成。Bootstrap提供了两种类型的媒体对象：媒体（.media）和媒体列表（.media-list）。媒体用来展示单个对象，媒体列表用来展示多个对象。

媒体

默认情况下，媒体由一个向左或向右浮动的媒体对象（如，图像、视频、音频等）和媒体内容构成。一个媒体中，可以嵌套另一个媒体。在HTML结构中，一个媒体由 3 部分组成：.media 创建媒体容器，.media-object 创建媒体对象，.media-body 创建媒体内容（其中，由 .media-heading 创建媒体的标题）。如：

<div class="media">

  <a class="pull-left" href="#">

    <img class="media-object" data-src="holder.js/64x64">

  </a>

  <div class="media-body">

    <h4 class="media-heading">Media heading</h4>

    ...

    <!-- Nested media object -->

    <div class="media">

      ...

    </div>

  </div>

</div>

效果如图 4‑61所示：

图4-61 Bootstrap媒体对象版权声明：本文出自 歪脖网 的《Bootstrap教程》，欢迎在线阅读，并提出宝贵意见。