怎樣創建一個媒體對象 ？

一個媒體對象由以下及部分組成

• 父容器 .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>

04.PNG