1. 概述
看到媒体，不要误解，此处媒体不是指的单纯的图形、视频、音频等媒体形式，而是指的Bootstrap中提供的一种显示组件。
Bootstrap媒体一般由文字、图像构成，大多数情况下图像作为一个抽象代表，文字作为内容描述。
举个最常见例子，微信中的聊天会话就是一个典型的媒体，左侧是头像，右侧上方是微信名称，右侧下方是最新的消息内容。
接下来我们就来使用Bootstrap实现下媒体。
2. 媒体实现
我们以微信聊天会话为例实现下媒体。
首先，我们设置一个媒体对象。
<div class="media"> </div> 第二，设置媒体左侧容器，用于放置头像。 <div class="media"> <div class="media-left"> </div> </div> 第三，在左侧容器中放入具体的媒体对象，需要使用.media-object类修饰。 <div class="media"> <div class="media-left"> <img class="media-object img-rounded" src="bootstrap-logo.jpg" alt="Bootstrap logo"> </div> </div> 第四，添加媒体的主体部分，并在主体部分设置标题，此处标题部分放置微信好友名称。 <div class="media"> <div class="media-left"> <img class="media-object img-rounded" src="bootstrap-logo.jpg" alt="Bootstrap logo"> </div> <div class="media-body"> <div class="meida-heading h3">bootstrap大神</div> </div> </div> 最后，标题下方添加描述信息，此处放置最近的聊天内容。 <div class="media"> <div class="media-left"> <img class="media-object img-rounded" src="bootstrap-logo.jpg" alt="Bootstrap logo"> </div> <div class="media-body"> <div class="meida-heading h3">bootstrap大神</div> <p> 你好吗，我想你了。 </p> </div> </div>
效果如下，可见一个媒体的模样已经出来了，再精细调整下文字和图像大小即可。
3. 媒体列表
微信对话不是一个，而是很多个组成的一个列表。
Bootstrap中可以通过.media-list类元素包裹起媒体，成为媒体列表。
示例代码：
<div class="media-list"> <div class="media"> <div class="media-left"> <img class="media-object img-rounded" src="bootstrap-logo.jpg" alt="Bootstrap logo"> </div> <div class="media-body"> <div class="meida-heading h3">bootstrap大神</div> <p> 你好吗，我想你了。 </p> </div> </div> <div class="media"> <div class="media-left"> <img class="media-object img-rounded" src="bootstrap-logo.jpg" alt="Bootstrap logo"> </div> <div class="media-body"> <div class="meida-heading h3">bootstrap大神2</div> <p> 你好吗，我想你了。 </p> </div> </div> </div>
对应效果：
4. 小结
Bootstrap媒体与媒体列表其实非常好用，使用场景也很多，例如博客列表、商品列表等等，所以还是需要好好掌握下子的。
