媒体对象 - Media Objects（摘录）

原文链接：http://www.jianshu.com/p/6443be21efbd

一个媒体对象由以下及部分组成

• 父容器 .media
• 媒体部分 .media-left 或者 .media-right，其内部包含图像使用 <img> 同时设置 .media-object
• 内容部分 .media-body ，其内部包含标题 <h1> 同时设置 .media-heading ，还可以设置小标题 <small>

<div class="media">

    <div class="media-left">
        <a href="#">
            <img src="/images/girls.jpg" class="media-object" alt="Sample Image">
        </a>
    </div>

    <div class="media-body">
        <h4 class="media-heading">大标题 <small><i>小标题</i></small></h4>
        <p> .......</p>
    </div>
</div>

媒体对象

如何让媒体对象的图片变成圆角或者圆形样式 ？

给 <img> 添加一个 .img-circle 或者 .img-round 样式

<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object img-circle"  ......>
        </a>
    </div>
    <div class="media-body">
        ......
    </div>
</div>

圆角

媒体对象中文本和图像在水平方向上怎样对齐 ？

如果图片高度大，文字高度小，则图片和文字顶部顶部对齐；如果图片高度小，文字高度大，则

• 默认情况下是顶部对齐
• 在 .media-left 或 .media-right 上使用.media-middle 则水平居中对齐
• 在 .media-left 或 .media-right 上使用.media-bottom 则底部对齐

<div class="media">
    <div class="media-left  media-middle">
        ......
    </div>
    <div class="media-body">
        ......
    </div>
</div>

对齐方式

媒体对象列表是什么东东？如何创建？

媒体对象列表就是一堆媒体对象，使用列表的好处是可以嵌套

• 最外层使用 <ul> 元素设置 .media-list 创建媒体对象列表
• 第一层的媒体对象使用 <li> 设置 .media 创建，其它层还是使用 <div> 创建
• 嵌套媒体对象在 .media-body 部分创建

<ul class="media-list">

    <!-- 第一层嵌套 -->
    <li class="media">
        <div class="media-left">
                       ......
        </div>
        <div class="media-body">
            ......

            <!-- 第二层嵌套 -->
            <div class="media">
                <div class="media-left">
                    ......
                </div>
                <div class="media-body">
                    ......

                    <!-- 第三层嵌套 -->
                    <div class="media">
                        <div class="media-left">
                            ......
                        </div>
                        <div class="media-body">
                            ......
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第二层嵌套 -->
            <div class="media">
                <div class="media-left">
                    ......
                </div>
                <div class="media-body">
                    ......
                </div>
            </div>
        </div>
    </li>

    <!-- 第一层嵌套 -->
    <li class="media">
        <div class="media-left">
            ......
        </div>
        <div class="media-body">
            ......
        </div>
    </li>
</ul>

文／勤劳的悄悄（简书作者）

原文链接：http://www.jianshu.com/p/6443be21efbd

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。