## 媒体对象 在web页面中，图片居左，内容居右排列（图片居右，内容居左排列），是非常常见的效果，它也就是媒体对象，它是一种抽象的样式，可以用来构建不同类型的组件。 **默认样式** 默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。 媒体对象一般是成组出现，一组媒体对象一般包括以下几部分： 1、媒体对象的容器：用来容纳媒体对象的所有内容，容器上需使用类名.media 2、媒体对象的对象：一般是图片，需使用类.media-object 3、媒体对象的主体：就是媒体对象的主体内容，可以是任何元素，需使用类.media-body 4、媒体对象的标题：用来描述媒体对象的一个标题，需使用类.media-heading ```html <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。</p> </div> </div> <div class="media"> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。</p> </div> <div class="media-right"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> </div> <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。</p> </div> <div class="media-right"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> </div> ```  `.pull-left`和`.pull-right`这两个类以前也曾经被用在了媒体组件上的左右浮动上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。`.media-left`和`.media-right`替代了他们，不同之处是，在 html 结构中，`.media-right`应当放在`.media-body`的后面。 ***** **对齐** 图片或其他媒体类型可以顶部、中部(media-middle)或底部(media-bottom)对齐。默认是顶部对齐。 ```html <div class="media"> <div class="media-left media-middle"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> </div> </div> <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> </div> </div> <div class="media"> <div class="media-left media-bottom"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> </div> </div> ```  ***** **媒体对象列表** bootstrap框架提供了一个媒体对象列表（多个媒体对象）展示的效果，在写结构的时候可以使用标签ul，并在标签ul上添加类名.media-list,在标签li上使用类.media。用法如下： ```html <ul class="media-list"> <li class="media"> <div class="media-left media-middle"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> </div> </li> <li class="media"> <div class="media-left media-middle"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> </div> </li> </ul> ```  它的展示效果更默认样式一样，只不过多了一个容器(ul)将列表包裹住。 ***** **媒体对象的嵌套** bootstrap媒体对象嵌套，只需将另一个媒体对象结构放在媒体对象的主体（.media-body）中。下面来看看媒体对象嵌套的用法： ```html <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。</p> </div> </div> </div> </div> </div> </div> ```