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


Posted in Javascript onDecember 26, 2016

媒体对象

基础媒体对象

例如:

<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”即可。
媒体对象列表只是把列表的左间距置0以及去掉了项目列表符号,实现源码如下:

.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基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 #Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 #Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 #Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 #Javascript
Bootstrap的modal拖动效果
Dec 25 #Javascript
原生ajax处理json格式数据的实例代码
Dec 25 #Javascript
JS异步文件分片断点上传的实现思路
Dec 25 #Javascript
You might like
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
javascript prototype 原型链
2009/03/12 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
jquery使用经验小结
2015/05/20 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
Sea.JS知识总结
2016/05/05 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python删除文本中行数标签的方法
2018/05/31 Python
python读取文本中的坐标方法
2018/10/14 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
python SocketServer源码深入解读
2019/09/17 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
如何用Python 加密文件
2020/09/10 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
竞职演讲稿范文
2014/01/11 职场文书
四查四看整改措施
2014/09/19 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python