Bootstrap<基礎二十七> 多媒體對象(Media Object)

來源:互聯網
上載者:User

標籤:

Bootstrap 中的多媒體對象(Media Object)。這些抽象的對象樣式用於建立各種類型的組件(比如:部落格評論),我們可以在組件中使用圖文混排,映像可以靠左對齊或者靠右對齊。媒體對象可以用更少的代碼來實現媒體對象與文字的混排。

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

  • .media:該 class 允許將媒體對象裡的多媒體(映像、視頻、音頻)浮動到內容區塊的左邊或者右邊。
  • .media-list:如果你需要一個列表,各項內容是無序列表的一部分,可以使用該 class。可用於評論列表與文章列表。

讓我們來看看下面這個有關預設的媒體對象 .media 的執行個體:

<!DOCTYPE html><html><head>   <title>Bootstrap 執行個體 - 預設的媒體對象</title>   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><div class="media">   <a class="pull-left" href="#">      <img class="media-object" src="/wp-content/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="/wp-content/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="/wp-content/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="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/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="/wp-content/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="/wp-content/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="/wp-content/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="/wp-content/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="/wp-content/uploads/2014/06/64.jpg"          alt="通用的預留位置映像">      </a>      <div class="media-body">         <h4 class="media-heading">媒體標題</h4>         這是一些樣本文本。這是一些樣本文本。         這是一些樣本文本。這是一些樣本文本。         這是一些樣本文本。這是一些樣本文本。         這是一些樣本文本。這是一些樣本文本。         這是一些樣本文本。這是一些樣本文本。      </div>   </li></ul></body></html>

結果如下所示:

  系列文章:Bootstrap <基礎一> css 概覽

Bootstrap<基礎二>網路系統

Bootstrap<基礎三>排版

Bootstrap<基礎四> 代碼

Bootstrap <基礎五>表格

Bootstrap<基礎六> 表單

Bootstrap <基礎七>按鈕

Bootstrap <基礎八>圖片

Bootstrap<基礎九>輔助類

Bootstrap<基礎十> 響應式工具 + 生產力

Bootstrap<基礎十一>字型表徵圖(Glyphicons)

Bootstrap <基礎十二>下拉式功能表(Dropdowns)

Bootstrap<基礎十三> 按鈕組

Bootstrap<基礎十四> 按鈕下拉式功能表

Bootstrap<基礎十五> 輸入框組

Bootstrap<基礎十六> 導航元素

Bootstrap<基礎十七>導覽列Bootstrap <基礎十八>麵包屑導航(Breadcrumbs)Bootstrap <基礎十九>分頁Bootstrap<基礎二十> 標籤Bootstrap <基礎二十一>徽章(Badges)Bootstrap <基礎二十二>超大螢幕(Jumbotron)Bootstrap <基礎二十三>頁面標題(Page Header)Bootstrap<基礎二十四> 縮圖Bootstrap <基礎二十五>警告(Alerts)Bootstrap <基礎二十六>進度條Bootstrap<基礎二十七> 多媒體對象(Media Object)

Bootstrap<基礎二十七> 多媒體對象(Media Object)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.