首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

.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源码解读媒体对象、列表组和面板（10）

- Author -

艺术就是爆炸

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
懒就要懒到底——鼠标自动点击（含时间判断）
Feb 20 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 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
pongo2(1) element-ui(1) 模板引擎(1) 优先队列(1) 逻辑函数(1) Carbon(1) 动态代理(1) Dijkstra(1) 连接查询(1) 数据合并(1)
You might like
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
详解使用nvm安装node.js
2017/07/18 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
python中的闭包用法实例详解
2015/05/05 Python
Python实现字典的key和values的交换
2015/08/04 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
福克斯租车：Fox Rent A Car
2017/04/13 全球购物
写求职信有什么意义
2014/02/17 职场文书
旷工检讨书1000字
2015/01/01 职场文书
售票员岗位职责
2015/02/15 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
赞美教师的句子
2019/09/02 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers