Bootstrap 媒體對象

2018-03-03 16:50 更新

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

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

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

media-body div應該有兩個組件：標題和文本內容。

標題可以使用帶有media-heading類的 h4 元素給出，并且使用 p 元素來表示文本內容。

例1

創(chuàng)建媒體對象的標記是：

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

要創(chuàng)建嵌套注釋設計，我們可以將更多的媒體對象標記放在前一個媒體對象的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>
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號