Bootstrap源码解读媒体对象、列表组和面板（10）

媒体对象

基础媒体对象

例如：

<div class="media"> <a class="pull-left" href="#">  <img class="media-object" src="http://placehold.it/350x150" alt="..."> </a> <div class="media-body">  <h4 class="media-heading">系列：十天精通CSS3</h4>  <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div> </div></div>

实现原理只是设置他们之间的间距。

媒体对象的嵌套

只需要将另一个媒体对象结构放置在媒体对象的主体“media-body”内即可。

媒体对象列表

使用ul，并且在ul上添加类名“media-list”，而在li上使用类名“media”即可。
媒体对象列表只是把列表的左间距置０以及去掉了项目列表符号，实现源码如下：

.media-list { padding-left: 0; list-style: none;}

列表组

基础列表组

基础列表组主要包括两个部分：
list-group：列表组容器，常用的是ul元素，也可以是ol或者div元素
list-group-item：列表项，常用的是li元素，也可以是div元素
例如：

<ul class="list-group"> <li class="list-group-item">111</li> <li class="list-group-item">222</li> <li class="list-group-item">333</li></ul>

主要设置了其间距，边框和圆角。实现源码如下：

.list-group { padding-left: 0; margin-bottom: 20px;}.list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd;}.list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px;}.list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;}

带徽章的列表组

其实就是将徽章组件和基础列表组结合在一起。只需要在“list-group-item”中添加徽章组件“badge”即可。例如：

<ul class="list-group"> <li class="list-group-item">  <span class="badge">2</span>列表项1 </li> <li class="list-group-item">  <span class="badge">3</span>列表项2 </li> <li class="list-group-item">  <span class="badge">4</span>列表项3 </li></ul>

实现原理就是给徽章设置了一个右浮动，如果有两个徽章同时在一个列表项中出现时，设置了他们之间的距离。实现源码如下：

.list-group-item > .badge { float: right;}.list-group-item > .badge + .badge { margin-right: 5px;}

带链接的列表组

要让列表组带链接，我们可以给列表项的文本添加链接<a>标签，然后增加style=”display: block”使整行可点击。例如：