媒体对象

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片

默认样式

默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）

xxxxxxxxxx
<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object" src="./1.jpg" alt="...">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">美女</h4>
        <p>这是一个大美女</p>
    </div>
</div>

对齐

图片或其他媒体类型可以顶部(media-top)、中部(media-middle)或底部(media-bottom)对齐。默认是顶部对齐

xxxxxxxxxx
<div class="media">
    <div class="media-left media-middle">
        <a href="#">
            <img class="media-object" src="./1.jpg" alt="...">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">美女</h4>
        <p>这是一个大美女</p>
        <p>这是一个大美女</p>
        <p>这是一个大美女</p>
    </div>
</div>

媒体对象列表

用media-list类，就能在列表内使用媒体对象组件（对评论或文章列表很有用）

xxxxxxxxxx
<ul class="media-list">
    <li class="media">
        <div class="media-left">
            <a href="#">
                <img class="media-object" src="./1.jpg" alt="...">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">美女</h4>
            <p>这是一个大美女</p>
        </div>
    </li>
</ul>

实时效果反馈

1. 下列那个类，可以实现媒体对象的列表效果：

A .media

B .media-left

C .media-object

D .media-list

答案

1=>D