<div> <a href="#"> <img src="https://placehold.it/350x150" alt="..."> </a> <div> <h4>系列：十天精通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> <li>111</li> <li>222</li> <li>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> <li> <span>2</span>列表项1 </li> <li> <span>3</span>列表项2 </li> <li> <span>4</span>列表项3 </li> </ul>
实现原理就是给徽章设置了一个右浮动，如果有两个徽章同时在一个列表项中出现时，设置了他们之间的距离。实现源码如下：
.list-group-item > .badge { float: right; } .list-group-item > .badge + .badge { margin-right: 5px; }
带链接的列表组
要让列表组带链接，我们可以给列表项的文本添加链接<a>标签，然后增加style=”display: block”使整行可点击。例如：
<ul> <li> <a href="##">111</a> </li> <li> <a href="##">222</a> </li> <li> <a href="##">333</a> </li> </ul>
不过Bootstrap有另外的实现方式，就是把ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。例如：
<div> <a href="##">列表项1</a> <a href="##">列表项2</a> <a href="##">列表项3</a> </div>
主要是给文本去掉了下划线，增加悬浮效果。实现源码如下：
a.list-group-item { color: #555; } a.list-group-item .list-group-item-heading { color: #333; } a.list-group-item:hover, a.list-group-item:focus { color: #555; text-decoration: none; background-color: #f5f5f5; }
自定义列表组
在链接列表组的基础上新增了两个样式：
list-group-item-heading：用来定义列表项头部样式
list-group-item-text：用来定义列表项主要内容
例如：
<div> <a href="##"> <h4>标题1</h4> <p>内容1内容1内容1</p> </a> <a href="##"> <h4>标题2</h4> <p>内容2内容2内容2</p> </a> </div>
实现源码如下：
a.list-group-item .list-group-item-heading { color: #333; } .list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading { color: inherit; } .list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text { color: #777; } .list-group-item.active .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading, .list-group-item.active:focus .list-group-item-heading, .list-group-item.active .list-group-item-heading > small, .list-group-item.active:hover .list-group-item-heading > small, .list-group-item.active:focus .list-group-item-heading > small, .list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading > .small, .list-group-item.active:focus .list-group-item-heading > .small { color: inherit; } .list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text { color: #e1edf7; } .list-group-item-heading { margin-top: 0; margin-bottom: 5px; } .list-group-item-text { margin-bottom: 0; line-height: 1.3; }
列表项的状态设置
在对应的列表项中添加类名“active/disabled”即可。
彩色列表组