Bootstrap之：媒体对象和媒体对象列表

一、媒体对象

在Web页面或者说移动页面制作中，常常看到这样的效果，图片居左（或居右），内容居右（或居左）排列，我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍。

<h3>默认媒体对象</h3>
<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
   </a>
   <div class="media-body">
     <h4 class="media-heading">系列：十天精通CSS3</h4>
     <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
   </div>
</div>

 

二、媒体对象列表

在很多时候，我们还会碰到一个列表，每个列表项都和媒体对象长得差不多，同样用评论系统来说事。

例如：

<div >
    <ul class="media-list">
        <li class="media">
            <a class="pull-left" hre="#">
                <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="我是玩儿"/>
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Header</h4>
                <p>我就是第一个</p>
            </div>
        </li>
        <li class="media">
            <a class="pull-left" hre="#">
                <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="我是玩儿"/>
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Header</h4>
                <p>我就是第二个</p>
            </div>
        </li>
        <li class="media">
            <a class="pull-left" hre="#">
                <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="我是玩儿"/>
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Header</h4>
                <p>我就是第三个</p>
            </div>
        </li>
    </ul>
</div>