源码网商城，靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

申请开店
全部源码分类
首页 源码街 任务需求 版权中心 备案服务 商家入驻

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

  • 时间：2022-11-14 03:50 编辑： 来源： 阅读：
  • 扫一扫，手机访问
摘要：Bootstrap源码解读媒体对象、列表组和面板（10）
[b]媒体对象[/b] 基础媒体对象 例如： 
<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>
实现原理只是设置他们之间的间距。 [b]媒体对象的嵌套[/b] 只需要将另一个媒体对象结构放置在媒体对象的主体“media-body”内即可。 [b]媒体对象列表[/b] 使用ul，并且在ul上添加类名“media-list”，而在li上使用类名“media”即可。 媒体对象列表只是把列表的左间距置０以及去掉了项目列表符号，实现源码如下： 
.media-list {
 padding-left: 0;
 list-style: none;
}
[b]列表组[/b] [b]基础列表组[/b] 基础列表组主要包括两个部分： 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;
}
[b]带徽章的列表组[/b] 其实就是将徽章组件和基础列表组结合在一起。只需要在“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;
}
[b]带链接的列表组[/b] 要让列表组带链接，我们可以给列表项的文本添加链接<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;
}
[b]自定义列表组[/b] 在链接列表组的基础上新增了两个样式： 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;
}
[b]列表项的状态设置[/b] 在对应的列表项中添加类名“active/disabled”即可。 彩色列表组 在“list-group-item”基础上增加对应的类名即可： list-group-item-success：成功绿 list-group-item-info：信息蓝 list-group-item-warning：警告黄 list-group-item-danger：错误红 实现原理其实仅仅是修改了背景、文本和边框的颜色而已。 [b]面板[/b] [b]基础面板[/b] 基础面板就是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;
}
[b]面板的头和尾[/b] 使用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;
}
[b]彩色面板[/b] 面板组件除了默认的主题样式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>
本文系列教程整理到：[url=http://www.1sucai.cn/Special/907.htm]Bootstrap基础教程[/url] 专题中，欢迎点击学习。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。
  • 全部评论(0)
上一篇：分享Javascript中最常用的55个经典小技巧
下一篇：写了10年的Javascript也未必全了解的连续赋值运算
关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2      苏公网安备32050702011978号      增值电信业务经营许可证编号：苏B2-20251499   |  Copyright 2018 - 2025   源码网商城 (www.ymwmall.com) 版权所有

联系客服
客服电话：
400-000-3129
微信版

扫一扫进微信版
返回顶部