Bootstrap源码解读媒体对象、列表组和面板（10）
媒体对象
基础媒体对象
例如：
<divclass="media"> <aclass="pull-left"href="#"> <imgclass="media-object"src="http://placehold.it/350x150"alt="..."> </a> <divclass="media-body"> <h4class="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元素
例如：
<ulclass="list-group"> <liclass="list-group-item">111</li> <liclass="list-group-item">222</li> <liclass="list-group-item">333</li> </ul>
主要设置了其间距，边框和圆角。实现源码如下：
.list-group{
padding-left:0;
margin-bottom:20px;
}
.list-group-item{
position:relative;
display:block;
padding:10px15px;
margin-bottom:-1px;
background-color:#fff;
border:1pxsolid#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”即可。例如：
<ulclass="list-group"> <liclass="list-group-item"> <spanclass="badge">2</span>列表项1 </li> <liclass="list-group-item"> <spanclass="badge">3</span>列表项2 </li> <liclass="list-group-item"> <spanclass="badge">4</span>列表项3 </li> </ul>
实现原理就是给徽章设置了一个右浮动，如果有两个徽章同时在一个列表项中出现时，设置了他们之间的距离。实现源码如下：
.list-group-item>.badge{
float:right;
}
.list-group-item>.badge+.badge{
margin-right:5px;
}
带链接的列表组
要让列表组带链接，我们可以给列表项的文本添加链接<a>标签，然后增加style=”display:block”使整行可点击。例如：
<ulclass="list-group"> <liclass="list-group-item"> <ahref="##"style="display:block">111</a> </li> <liclass="list-group-item"> <ahref="##"style="display:block">222</a> </li> <liclass="list-group-item"> <ahref="##"style="display:block">333</a> </li> </ul>
不过Bootstrap有另外的实现方式，就是把ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。例如：
<divclass="list-group"> <ahref="##"class="list-group-item">列表项1</a> <ahref="##"class="list-group-item">列表项2</a> <ahref="##"class="list-group-item">列表项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：用来定义列表项主要内容
例如：
<divclass="list-group"> <ahref="##"class="list-group-item"> <h4class="list-group-item-heading">标题1</h4> <pclass="list-group-item-text">内容1内容1内容1</p> </a> <ahref="##"class="list-group-item"> <h4class="list-group-item-heading">标题2</h4> <pclass="list-group-item-text">内容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”即可。
彩色列表组
在“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”。例如：
<divclass="panelpanel-default"> <divclass="panel-body">基础面板</div> </div>
实现源码如下：
.panel{
margin-bottom:20px;
background-color:#fff;
border:1pxsolidtransparent;
border-radius:4px;
-webkit-box-shadow:01px1pxrgba(0,0,0,.05);
box-shadow:01px1pxrgba(0,0,0,.05);
}
.panel-body{
padding:15px;
}
面板的头和尾
使用panel-heading和panel-footer即可。例如：
<divclass="panelpanel-default"> <divclass="panel-heading">头部内容</div> <divclass="panel-body正文内容</div> <divclass="panel-footer">尾部内容</div> </div>
实现源码如下：
.panel-heading{
padding:10px15px;
border-bottom:1pxsolidtransparent;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.panel-heading>.dropdown.dropdown-toggle{
color:inherit;
}
.panel-title{
margin-top:0;
margin-bottom:0;
font-size:16px;
color:inherit;
}
.panel-title>a{
color:inherit;
}
.panel-footer{
padding:10px15px;
background-color:#f5f5f5;
border-top:1pxsolid#ddd;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
}
彩色面板
面板组件除了默认的主题样式panel-default之外，还有以下几种彩色主题样式：
panel-primary：重点蓝
panel-success：成功绿
panel-info：信息蓝
panel-warning：警告黄
panel-danger：危险红
例如：<divclass="panelpanel-primary">…</div>
面板中嵌套表格
例如：
<divclass="panelpanel-primary"> <divclass="panel-heading">这里是标题</div> <divclass="panel-body"> <p>这里是正文</p> </div> <tableclass="tabletable-bordered"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>表内容1</td> <td>表内容2</td> <td>表内容3</td> </tr> </tbody> </table> <divclass="panel-footer">这里是尾巴</div> </div>
我们这里吧table放在和panel-body平级的地方。把table放在panel-body里面也可以，不过由于panel-body设置了一个padding：15px的值，所以那样的话表格和面板边缘会有一点间距，不太好看。
面板中嵌套列表组
例如：
<divclass="panelpanel-primary"> <divclass="panel-heading">这里是标题</div> <divclass="panel-body"> <p>这里是正文</p> </div> <ulclass="list-group"> <liclass="list-group-item">列表项1</li> <liclass="list-group-item">列表项2</li> <liclass="list-group-item">列表项3</li> </ul> <divclass="panel-footer">这里是尾巴</div> </div>
本文系列教程整理到：Bootstrap基础教程专题中，欢迎点击学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。