17、媒體對象 · Bootstrap前端響應式框架學習技術分享總結

## 媒體對象在web頁面中，圖片居左，內容居右排列（圖片居右，內容居左排列），是非常常見的效果，它也就是媒體對象，它是一種抽象的樣式，可以用來構建不同類型的組件。 **默認樣式** 默認樣式的媒體對象組件允許在一個內容塊的左邊或右邊展示一個多媒體內容（圖像、視頻、音頻）。媒體對象一般是成組出現，一組媒體對象一般包括以下幾部分： 1、媒體對象的容器：用來容納媒體對象的所有內容，容器上需使用類名.media 2、媒體對象的對象：一般是圖片，需使用類.media-object 3、媒體對象的主體：就是媒體對象的主體內容，可以是任何元素，需使用類.media-body 4、媒體對象的標題：用來描述媒體對象的一個標題，需使用類.media-heading ```html <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>默認樣式的媒體對象組件允許在一個內容塊的左邊或右邊展示一個多媒體內容（圖像、視頻、音頻）。</p> </div> </div> <div class="media"> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>默認樣式的媒體對象組件允許在一個內容塊的左邊或右邊展示一個多媒體內容（圖像、視頻、音頻）。</p> </div> <div class="media-right"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> </div> <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>默認樣式的媒體對象組件允許在一個內容塊的左邊或右邊展示一個多媒體內容（圖像、視頻、音頻）。</p> </div> <div class="media-right"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> </div> ``` ![](https://img.kancloud.cn/2e/4e/2e4e2e34d536d91782fd6e8b7c0e7499_905x296.png) `.pull-left`和`.pull-right`這兩個類以前也曾經被用在了媒體組件上的左右浮動上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。`.media-left`和`.media-right`替代了他們，不同之處是，在 html 結構中，`.media-right`應當放在`.media-body`的后面。 ***** **對齊** 圖片或其他媒體類型可以頂部、中部(media-middle)或底部(media-bottom)對齊。默認是頂部對齊。 ```html <div class="media"> <div class="media-left media-middle"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> </div> </div> <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> </div> </div> <div class="media"> <div class="media-left media-bottom"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> </div> </div> ``` ![](https://img.kancloud.cn/48/a1/48a16f482963ed2d511149ac9b581752_907x513.png) ***** **媒體對象列表** bootstrap框架提供了一個媒體對象列表（多個媒體對象）展示的效果，在寫結構的時候可以使用標簽ul，并在標簽ul上添加類名.media-list,在標簽li上使用類.media。用法如下： ```html <ul class="media-list"> <li class="media"> <div class="media-left media-middle"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> </div> </li> <li class="media"> <div class="media-left media-middle"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> </div> </li> </ul> ``` ![](https://img.kancloud.cn/c4/c9/c4c9946aad9b144fe8d2f216e9813203_904x447.png) 它的展示效果更默認樣式一樣，只不過多了一個容器(ul)將列表包裹住。 ***** **媒體對象的嵌套** bootstrap媒體對象嵌套，只需將另一個媒體對象結構放在媒體對象的主體（.media-body）中。下面來看看媒體對象嵌套的用法： ```html <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> <div class="media"> <div class="media-left"> <a href="##"> <img src="../img/timg.jpg"class="" width="64" height="64" alt=""/> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>.pull-left 和 .pull-right 這兩個類以前也曾經被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結構中， .media-right 應當放在 .media-body 的后面。</p> </div> </div> </div> </div> </div> </div> ``` ![](https://img.kancloud.cn/a1/6f/a16f9d2d8d635591544197265a3b0e63_909x378.png)