多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

中國最全IT社區平臺聯系我們 | 收藏本站

bootstrap教程

Bootstrap 教程

Bootstrap CSS

Bootstrap 布局組件

Bootstrap 插件

Bootstrap 其他

←上一篇： Bootstrap 進度條

→下一篇：Bootstrap 列表組

Bootstrap 多媒體對象

閱讀 (2590)

Bootstrap 多媒體對象（Media Object）

本章我們將講解 Bootstrap 中的多媒體對象（Media Object）。這些抽象的對象樣式用于創建各種類型的組件（比如：博客評論），我們可以在組件中使用圖文混排，圖像可以左對齊或者右對齊。媒體對象可以用更少的代碼來實現媒體對象與文字的混排。

媒體對象輕量標記、易于擴展的特性是通過向簡單的標記應用 class 來實現的。你可以在 HTML 標簽中添加以下兩種形式來設置媒體對象：

.media：該 class 允許將媒體對象里的多媒體（圖像、視頻、音頻）浮動到內容區塊的左邊或者右邊。
.media-list：如果你需要一個列表，各項內容是無序列表的一部分，可以使用該 class?？捎糜谠u論列表與文章列表。

讓我們來看看下面這個有關默認的媒體對象 .media 的實例：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 默認的媒體對象</title>
   <link href="/s/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/upload/help//scripts/jquery.min.js"></script>
   <script src="/upload/help//bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/upload/help//attachments/uploads/2014/06/64.jpg"        alt="媒體對象">
   </a>
   <div class="media-body">
      <h4 class="media-heading">媒體標題</h4>
      這是一些示例文本。這是一些示例文本。 
      這是一些示例文本。這是一些示例文本。
     這是一些示例文本。這是一些示例文本。
    這是一些示例文本。這是一些示例文本。
    這是一些示例文本。這是一些示例文本。
   </div>
</div>
<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/upload/help//attachments/uploads/2014/06/64.jpg"        alt="媒體對象">
   </a>
   <div class="media-body">
      <h4 class="media-heading">媒體標題</h4>
      這是一些示例文本。這是一些示例文本。 
      這是一些示例文本。這是一些示例文本。
    這是一些示例文本。這是一些示例文本。
    這是一些示例文本。這是一些示例文本。
    這是一些示例文本。這是一些示例文本。
      <div class="media">
         <a class="pull-left" href="#">
            <img class="media-object" src="/upload/help//attachments/uploads/2014/06/64.jpg"              alt="媒體對象">
         </a>
         <div class="media-body">
            <h4 class="media-heading">媒體標題</h4>
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。 
            這是一些示例文本。這是一些示例文本。
           這是一些示例文本。這是一些示例文本。
         </div>
      </div>
   </div>
</div>

</body>
</html>

結果如下所示：

讓我們來看看下面這個有關媒體對象列表 .media-list 的實例：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 媒體對象列表</title>
   <link href="/s/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/upload/help//scripts/jquery.min.js"></script>
   <script src="/upload/help//bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="media-list">
   <li class="media">
      <a class="pull-left" href="#">
         <img class="media-object" src="/upload/help//attachments/uploads/2014/06/64.jpg"           alt="通用的占位符圖像">
      </a>
      <div class="media-body">
         <h4 class="media-heading">媒體標題</h4>
         <p>這是一些示例文本。這是一些示例文本。 
          這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。</p>
         <!-- 嵌套的媒體對象 -->
         <div class="media">
            <a class="pull-left" href="#">
               <img class="media-object" src="/upload/help//attachments/uploads/2014/06/64.jpg"                 alt="通用的占位符圖像">
            </a>
            <div class="media-body">
               <h4 class="media-heading">嵌套的媒體標題</h4>
               這是一些示例文本。這是一些示例文本。
               這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
               <!-- 嵌套的媒體對象 -->
               <div class="media">
                  <a class="pull-left" href="#">
                     <img class="media-object" src="/upload/help//attachments/uploads/2014/06/64.jpg"                       alt="通用的占位符圖像">
                  </a>
                  <div class="media-body">
                     <h4 class="media-heading">嵌套的媒體標題</h4>
                     這是一些示例文本。這是一些示例文本。
                  這是一些示例文本。這是一些示例文本。
                    這是一些示例文本。這是一些示例文本。
                    這是一些示例文本。這是一些示例文本。
                    這是一些示例文本。這是一些示例文本。
                  </div>
               </div>
            </div>
         </div>
         <!-- 嵌套的媒體對象 -->
         <div class="media">
            <a class="pull-left" href="#">
               <img class="media-object" src="/upload/help//attachments/uploads/2014/06/64.jpg"                 alt="通用的占位符圖像">
            </a>
            <div class="media-body">
               <h4 class="media-heading">嵌套的媒體標題</h4>
               這是一些示例文本。這是一些示例文本。
              這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
            這是一些示例文本。這是一些示例文本。
            </div>
         </div>
      </div>
   </li>
   <li class="media">
      <a class="pull-right" href="#">
         <img class="media-object" src="/upload/help//attachments/uploads/2014/06/64.jpg"           alt="通用的占位符圖像">
      </a>
      <div class="media-body">
         <h4 class="media-heading">媒體標題</h4>
         這是一些示例文本。這是一些示例文本。
       這是一些示例文本。這是一些示例文本。
        這是一些示例文本。這是一些示例文本。
        這是一些示例文本。這是一些示例文本。
        這是一些示例文本。這是一些示例文本。
      </div>
   </li>
</ul>

</body>
</html>

結果如下所示：

←上一篇： Bootstrap 進度條

→下一篇：Bootstrap 列表組

教程導航