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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
关于文本限制字数的js代码
Apr 02 Javascript
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Vue 项目代理设置的优化
Apr 17 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中each与list用法分析
2016/01/08 PHP
PHP 中常量的知识整理
2017/04/14 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
原生js+canvas实现下雪效果
2020/08/02 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python中 Lambda表达式全面解析
2016/11/28 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
《胖乎乎的小手》教学反思
2014/02/26 职场文书
生物制药专业求职信
2014/03/11 职场文书
服务承诺书格式
2014/05/21 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
班主任先进事迹材料
2014/12/17 职场文书
学生会个人总结范文
2015/02/15 职场文书
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers