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 相关文章推荐
JS localStorage实现本地缓存的方法
Jun 22 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
原生JavaScript实现购物车
Jan 10 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通用分页类page.php[仿google分页]
2008/08/31 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
js实现秒表计时器
2019/12/16 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python中的列表与元组的使用
2019/08/08 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
利用python进行文件操作
2020/12/04 Python
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
NET程序员上机面试题
2015/05/23 面试题
市场专员岗位职责
2014/02/14 职场文书
成绩单评语
2015/01/04 职场文书
担保书格式
2015/01/20 职场文书
高三英语教学计划
2015/01/23 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
大国崛起日本观后感
2015/06/02 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript