閱讀(3.9k) 書簽贊(1) 我要糾錯(cuò)

Bootstrap 媒體對(duì)象

2018-03-03 16:50 更新

媒體對(duì)象（Media Object）用于創(chuàng)建應(yīng)包含左或右對(duì)齊的媒體（圖片，視頻或音頻）以及一些文本內(nèi)容的組件。

Bootstrap的媒體對(duì)象可以方便的創(chuàng)建多級(jí)嵌套注釋。

要生成媒體對(duì)象，你需要?jiǎng)?chuàng)建一個(gè)具有媒體類的div。然后你把兩個(gè)必要的組件放在里面：媒體和media-body。

media-body div應(yīng)該有兩個(gè)組件：標(biāo)題和文本內(nèi)容。

標(biāo)題可以使用帶有media-heading類的 h4 元素給出，并且使用 p 元素來表示文本內(nèi)容。

例1

創(chuàng)建媒體對(duì)象的標(biāo)記是：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
    <div class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://placehold.it/50x50" alt="">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Awesome piece  of work!</h4>
            <p>Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur </p>
        </div>
    </div>

  </body>
</html>

例2

要?jiǎng)?chuàng)建嵌套注釋設(shè)計(jì)，我們可以將更多的媒體對(duì)象標(biāo)記放在前一個(gè)媒體對(duì)象的media-body div中，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
    <div class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://placehold.it/50x50" alt="">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Awesome piece  of work!</h4>
            <p>Lorem ipsum  dolor  sit amet,  consectetur ...</p>
            <!-- Second  Media  Object  -->
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="http://placehold.it/50x50" alt="">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">Awesome piece of work!</h4>
                    <p>Lorem ipsum  dolor  sit amet,  consectetur ...</p>
                </div>
            </div>
        </div>
    </div>

  </body>
</html>

以上內(nèi)容是否對(duì)您有幫助：

在文檔使用的過程中是否遇到以下問題：