怎樣創(chuàng)建一個(gè)媒體對(duì)象 ？

一個(gè)媒體對(duì)象由以下及部分組成

• 父容器 .media
• 媒體部分 .media-left 或者 .media-right，其內(nèi)部包含圖像使用 <img> 同時(shí)設(shè)置 .media-object
• 內(nèi)容部分 .media-body ，其內(nèi)部包含標(biāo)題 <h1> 同時(shí)設(shè)置 .media-heading ，還可以設(shè)置小標(biāo)題 <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">大標(biāo)題 <small><i>小標(biāo)題</i></small></h4>
        <p> .......</p>
    </div>
</div>

媒體對(duì)象

如何讓媒體對(duì)象的圖片變成圓角或者圓形樣式 ？

給 <img> 添加一個(gè) .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>

圓角

媒體對(duì)象中文本和圖像在水平方向上怎樣對(duì)齊 ？

如果圖片高度大，文字高度小，則圖片和文字頂部頂部對(duì)齊；如果圖片高度小，文字高度大，則

• 默認(rèn)情況下是頂部對(duì)齊
• 在 .media-left 或 .media-right 上使用.media-middle 則水平居中對(duì)齊
• 在 .media-left 或 .media-right 上使用.media-bottom 則底部對(duì)齊

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

對(duì)齊方式

媒體對(duì)象列表是什么東東？如何創(chuàng)建？

媒體對(duì)象列表就是一堆媒體對(duì)象，使用列表的好處是可以嵌套

• 最外層使用 <ul> 元素設(shè)置 .media-list 創(chuàng)建媒體對(duì)象列表
• 第一層的媒體對(duì)象使用 <li> 設(shè)置 .media 創(chuàng)建，其它層還是使用 <div> 創(chuàng)建
• 嵌套媒體對(duì)象在 .media-body 部分創(chuàng)建

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

04.PNG