bootstrap基础知识（五）－－媒体对象

媒体对象 

像这样排列

1）默认媒体对象

容器常使用类名“media”表示

对象用”media－object“表示

主体用”media－body“表示

标题用”media－heading“表示

“pull－left”以及“pull－right”表示悬浮方式

代码如下：

<div class="media">

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

扫描二维码关注公众号，回复： 1898845 查看本文章

        <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> 

2)媒体对象的嵌套

例如： 

一个media容器中嵌套一个media再嵌套一个media

注意：图片要向左悬浮可以在外面套一层a标签并添加类名“pull－left”

3）媒体对象列表 

既然是列表就可以用ul以及li来表示

这里用类名为”media-list”的ul，类名为“media”的li

li中的内容就是media－body的内容

例如：

<ul class="media-list">

    <li class="media">

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

            <img class="media-object" src=" " alt="...">

        </a>

        <div class="media-body">

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

            <div>…</div>

        </div>

    </li>

    <li class="media">…</li>

    <li class="media">…</li>

</ul>