Bootstrap基础二十七 多媒体对象（Media Object）
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap基础二十七 多媒体对象（Media Object）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Bootstrap<基礎二十七> 多媒體對象（Media Object） 原文:Bootstrap<基礎二十七> 多媒體對象（Media Object）
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） posted on 2015-05-06 14:04 NET未來之路 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/lonelyxmas/p/4481717.html
總結
以上是生活随笔為你收集整理的Bootstrap基础二十七 多媒体对象（Media Object）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于标签系统的又一点想法。
- 下一篇： 【leetcode】3 minstack