BootStrap-CSS樣式_佈局元件_多媒體對
阿新 • • 發佈：2019-01-01
多媒體對
Bootstrap 中的多媒體物件（Media Object）：這些抽象的物件樣式用於創 建各種型別的元件（比如：部落格評論），我們可以在元件中使用圖文混排，影象可以左對齊或者 右對齊。媒體物件可以用更少的程式碼來實現媒體物件與文字的混排。
媒體物件輕量標記、易於擴充套件的特性是通過向簡單的標記應用 class 來實現的：
.media：該 class 允許將媒體物件裡的多媒體（影象、視訊、音訊）浮動到內容區塊的 左邊或者右邊。
.media-list：如果你需要一個列表，各項內容是無序列表的一部分，可以使用該 class。 可用於評論列表與文章列表。
.media-object：媒體標題
.media-body：媒體內容
.pull-left:媒體標題物件左浮動
.pull-right:媒體標題物件右浮動
.clearfix：清楚浮動
程式碼例項：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>多媒體物件</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body style="padding:50px;"> <!-- .media：該 class 允許將媒體物件裡的多媒體（影象、視訊、音訊）浮動到內容區塊的 左邊或者右邊。 .media-list：如果你需要一個列表，各項內容是無序列表的一部分，可以使用該 class。 可用於評論列表與文章列表。 .media-object：媒體標題 .media-body：媒體內容 .pull-left:媒體標題物件左浮動 .pull-right:媒體標題物件右浮動 .clearfix：清楚浮動 --> <h2>多層巢狀媒體物件</h2> <div class="media"> <a href="#" class="pull-left"> <img alt="媒體物件" class="media-object" src="../img/phone.jpg"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些示例文字，這是一些示例文字， 這是一些示例文字，這是一些示例文字， 這是一些示例文字，這是一些示例文字 <div class="media"> <a href="#" class="pull-left"> <img alt="媒體物件" class="media-object" src="../img/phone.jpg"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些示例文字，這是一些示例文字， 這是一些示例文字，這是一些示例文字， 這是一些示例文字，這是一些示例文字 <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="../img/phone.jpg" alt="媒體物件"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 </div> </div> </div> </div> </div> </div> <h2>列表巢狀組媒體物件</h2> <ul class="midia-list list-unstyled"> <li class="media"> <a href="#" class="pull-left" > <img alt="媒體物件" class="media-object" src="../img/phone.jpg"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些示例文字1，這是一些示例文字2， 這是一些示例文字，這是一些示例文字， 這是一些示例文字，這是一些示例文字 </div> </li> <div class="clearfix"></div> <li class="media"> <a href="#" class="pull-left"> <img alt="媒體物件" class="media-object" src="../img/phone.jpg"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些示例文字aa，這是一些示例文字bb， 這是一些示例文字，這是一些示例文字， 這是一些示例文字，這是一些示例文字 </div> </li> <div class="clearfix"></div> <li class="media"> <a href="#" class="pull-right"> <img alt="媒體物件" class="media-object" src="../img/phone.jpg"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些示例文字aa，這是一些示例文字bb， 這是一些示例文字，這是一些示例文字， 這是一些示例文字，這是一些示例文字 </div> </li> </ul> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
顯示效果：
