##1.媒体对象 媒体对象是一些抽象元素,是用来建立复杂繁琐组件(比如说博客评论、推文等)的基础。它支持左对齐内容、右对齐内容、内容对齐选项、嵌套,等等。
##2.媒体对象的组成
-
媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容
-
媒体对像的对象:常使用“media-left”表示,就是媒体对象中的对象,常常是图片
-
媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容
-
媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选
<div class="media">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">标题</h4>
文本
</div>
</div>
##3. 媒体列表
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img src="MMVM.png" width="64px " height="64px">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</li>
<li class="media">
<div class="media-left">
<a href="#">
<img src="MMVM.png" width="64px " height="64px">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</li>