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è)具有媒體類(lèi)的div。然后你把兩個(gè)必要的組件放在里面：媒體和media-body。

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

標(biāo)題可以使用帶有media-heading類(lèi)的 h4 元素給出，并且使用 p 元素來(lái)表示文本內(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ì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)