媒體對象的嵌套僅是媒體對象中一個簡單應(yīng)用效果之一，在很多時候，我們還會碰到一個列表，每個列表項(xiàng)都和媒體對象長得差不多，同樣用評論系統(tǒng)來說事：
使用方法：
針對上圖的媒體對象列表效果，Bootstrap框架提供了一個列表展示的效果，在寫結(jié)構(gòu)的時候可以使用ul，并且在ul上添加類名“media-list”，而在li上使用“media”，示例代碼如下：
<ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src=" " alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media Header</h4> <div>…</div> </div> </li> <li class="media">…</li> <li class="media">…</li> </ul>
運(yùn)行效果如下：
原理分析：
媒體對象列表，在樣式上也并沒有做過多的特殊處理，只是把列表的左間距置０以及去掉了項(xiàng)目列表符號：
/*bootstrap.css文件第4816行～第4819行*/
.media-list {
padding-left: 0;
list-style: none;
}
我來試試：制作一個媒體對象列表
素材地址：
1、http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031
2、http://tp2.sinaimg.cn/3306361973/50/22875318196/0
3、http://tp4.sinaimg.cn/1167075935/50/22838101204/1
效果圖如下：
參考代碼如下：
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">我是大漠</h4>
<div>我是W3cplus站長大漠，我在寫B(tài)ootstrap框中的媒體對象測試用例</div>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">慕課網(wǎng)</h4>
<div>大漠寫的《玩轉(zhuǎn)Bootstrap》系列教程即將會在慕課網(wǎng)上發(fā)布</div>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">W3cplus</h4>
<div>W3cplus站上還有很多教程....</div>
</div>
</li>
</ul>
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報