媒体对象
基础媒体对象
例如：
全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！
基础媒体对象
例如：
实现原理只是设置他们之间的间距。
媒体对象的嵌套
只需要将另一个媒体对象结构放置在媒体对象的主体“media-body”内即可。
媒体对象列表
使用ul，并且在ul上添加类名“media-list”，而在li上使用类名“media”即可。 媒体对象列表只是把列表的左间距置０以及去掉了项目列表符号，实现源码如下：
基础列表组
基础列表组主要包括两个部分： list-group：列表组容器，常用的是ul元素，也可以是ol或者div元素 list-group-item：列表项，常用的是li元素，也可以是div元素 例如：
主要设置了其间距，边框和圆角。实现源码如下：
带徽章的列表组
其实就是将徽章组件和基础列表组结合在一起。只需要在“list-group-item”中添加徽章组件“badge”即可。例如：
实现原理就是给徽章设置了一个右浮动，如果有两个徽章同时在一个列表项中出现时，设置了他们之间的距离。实现源码如下：
带链接的列表组
要让列表组带链接，我们可以给列表项的文本添加链接标签，然后增加style=”display: block”使整行可点击。例如：
不过Bootstrap有另外的实现方式，就是把ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。例如：
主要是给文本去掉了下划线，增加悬浮效果。实现源码如下：
<div class="jb51code">
<pre class="brush:css;">
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：用来定义列表项主要内容 例如：
@H_404_11@
实现源码如下：
@H_404_11@
列表项的状态设置
在对应的列表项中添加类名“active/disabled”即可。
彩色列表组
在“list-group-item”基础上增加对应的类名即可： list-group-item-success：成功绿 list-group-item-info：信息蓝 list-group-item-warning：警告黄 list-group-item-danger：错误红 实现原理其实仅仅是修改了背景、文本和边框的颜色而已。
基础面板
基础面板就是div容器运用了“panel”样式，产生一个具有边框的文本显示块，然后在里面添加了一个“div.panel-body”来放置面板主体内容。由于“panel”不控制主题颜色，所以我们在“panel”的基础上增加一个控制颜色的主题“panel-default”。例如：
@H_404_11@
实现源码如下：
@H_404_11@
面板的头和尾
使用panel-heading和panel-footer即可。例如：
@H_404_11@
实现源码如下：
@H_404_11@
彩色面板
面板组件除了默认的主题样式panel-default之外，还有以下几种彩色主题样式： panel-primary：重点蓝 panel-success：成功绿 panel-info：信息蓝 panel-warning：警告黄 panel-danger：危险红 例如：
面板中嵌套表格
例如：
| 表头2 | 表头3 |
|---|