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”使整行可点击。例如：

<ul class="list-group">
 <li class="list-group-item">
  <a href="##" style="display: block">111</a>
 </li>
 <li class="list-group-item">
  <a href="##" style="display: block">222</a>
 </li>
 <li class="list-group-item">
  <a href="##" style="display: block">333</a>
 </li>
</ul>

不过Bootstrap有另外的实现方式，就是把ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。例如：

<div class="list-group">
 <a href="##" class="list-group-item">列表项1</a>
 <a href="##" class="list-group-item">列表项2</a>
 <a href="##" 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：用来定义列表项主要内容
例如：

<div class="list-group">
 <a href="##" class="list-group-item">
  <h4 class="list-group-item-heading">标题1</h4>
  <p class="list-group-item-text">内容1内容1内容1</p>
 </a>
 <a href="##" class="list-group-item">
  <h4 class="list-group-item-heading">标题2</h4>
  <p class="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”。例如：

<div class="panel panel-default">
 <div class="panel-body">基础面板</div>
</div>

实现源码如下：

.panel {
 margin-bottom: 20px;
 background-color: #fff;
 border: 1px solid transparent;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
 padding: 15px;
}

面板的头和尾

使用panel-heading和panel-footer即可。例如：

<div class="panel panel-default">
 <div class="panel-heading">头部内容</div>
 <div class="panel-body正文内容</div>
 <div class="panel-footer">尾部内容</div>
</div>

实现源码如下：

.panel-heading {
 padding: 10px 15px;
 border-bottom: 1px solid transparent;
 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: 10px 15px;
 background-color: #f5f5f5;
 border-top: 1px solid #ddd;
 border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;
}

彩色面板

面板组件除了默认的主题样式panel-default之外，还有以下几种彩色主题样式：
panel-primary：重点蓝
panel-success：成功绿
panel-info：信息蓝
panel-warning：警告黄
panel-danger：危险红
例如：<div class="panel panel-primary">…</div>

面板中嵌套表格

例如：

<div class="panel panel-primary">
 <div class="panel-heading">这里是标题</div>
 <div class="panel-body">
  <p>这里是正文</p>
 </div>
 <table class="table table-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>
 <div class="panel-footer">这里是尾巴</div>
</div>

我们这里吧table放在和panel-body平级的地方。把table放在panel-body里面也可以，不过由于panel-body设置了一个padding：15px的值，所以那样的话表格和面板边缘会有一点间距，不太好看。

面板中嵌套列表组

例如：

<div class="panel panel-primary">
 <div class="panel-heading">这里是标题</div>
 <div class="panel-body">
  <p>这里是正文</p>
 </div>
 <ul class="list-group">
  <li class="list-group-item">列表项1</li>
  <li class="list-group-item">列表项2</li>
  <li class="list-group-item">列表项3</li>
 </ul>
 <div class="panel-footer">这里是尾巴</div>
</div>

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap  # 媒体对象  # 列表组  # 面板  # Bootstrap学习笔记之进度条、媒体对象实例详解  # Bootstrap媒体对象学习使用  # Bootstrap媒体对象的实现  # Bootstrap每天必学之媒体对象  # 老生常谈Bootstrap媒体对象  # 的是  # 放在  # 只需  # 掉了  # 他们之间  # 基础上增加  # 会有  # 不太  # 基础上  # 下划线  # 而在  # 要在  # 我们可以  # 仅仅是  # 几种  # 自定义  # 穿上  # 要让  # 在里面  # 要将 

相关文章： 如何高效完成独享虚拟主机建站？  如何用景安虚拟主机手机版绑定域名建站？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  盘锦网站制作公司,盘锦大洼有多少5G网站？  如何快速登录WAP自助建站平台？  定制建站流程解析：需求评估与SEO优化功能开发指南  一键网站制作软件,义乌购一件代发流程？  如何在VPS电脑上快速搭建网站？  建站之星与建站宝盒如何选择最佳方案？  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  建站之星导航如何优化提升用户体验？  非常酷的网站设计制作软件,酷培ai教育官方网站？  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  已有域名建站全流程解析：网站搭建步骤与建站工具选择  如何在建站主机中优化服务器配置？  如何用wdcp快速搭建高效网站？  网站制作服务平台,有什么网站可以发布本地服务信息？  h5在线制作网站电脑版下载,h5网页制作软件？  江苏网站制作公司有哪些,江苏书法考级官方网站？  建站之星导航配置指南：自助建站与SEO优化全解析  宝塔新建站点报错如何解决？  如何配置IIS站点权限与局域网访问？  如何在宝塔面板中修改默认建站目录？  如何选择可靠的免备案建站服务器？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  如何批量查询域名的建站时间记录？  网站规划与制作是什么,电子商务网站系统规划的内容及步骤是什么？  做企业网站制作流程,企业网站制作基本流程有哪些？  如何在Windows虚拟主机上快速搭建网站？  建站主机选择指南：服务器配置与SEO优化实战技巧  如何快速搭建高效香港服务器网站？  如何在万网ECS上快速搭建专属网站？  建站之星会员如何解锁更多建站功能？  成都网站制作公司哪家好,四川省职工服务网是做什么用？  如何通过西部数码建站助手快速创建专业网站？  如何快速搭建自助建站会员专属系统？  建站之星如何修改网站生成路径？  建站之星图片链接生成指南：自助建站与智能设计教程  如何用免费手机建站系统零基础打造专业网站？  整人网站在线制作软件,整蛊网站退不出去必须要打我是白痴才能出去？  太平洋网站制作公司,网络用语太平洋是什么意思？  jQuery 常见小例汇总  实现点击下箭头变上箭头来回切换的两种方法【推荐】  大学网站设计制作软件有哪些,如何将网站制作成自己app？  学校免费自助建站系统：智能生成+拖拽设计+多端适配  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  定制建站方案优化指南：企业官网开发与建站费用解析  如何通过商城免费建站系统源码自定义网站主题？  已有域名和空间如何搭建网站？  在线制作视频的网站有哪些,电脑如何制作视频短片？