Bootstrap3学习笔记(三)之表格


Posted in Javascript onMay 20, 2016

在上篇文章给大家介绍了 BootStrap3学习笔记(一)之网格系统       Bootstrap3学习笔记(二)之排版

只需要在table标签上使用.table类,就可以使用bootstrap默认的表格样式

如果需要行背景有交替变化,可以这样设定:

<table class="table table-striped">

如果需要边框,可以这样设定:

<table class="table table-bordered">

如果希望鼠标移动到内容行上有响应效果,可以这样设定:

<table class="table table-hover">

如果希望表格紧凑一点节省空间,可以这样设定,cell的pedding将减半为4px,默认padding为8px:

<table class="table table-condensed">

也可以给某行加上特定的样式:

<tr class="active">
<tr class="success">
<tr class="info">
<tr class="warning">
<tr class="danger">

为了不同设备上显示一致,对表格也可使用响应式设定,在表格外使用div修饰一下,将自动适应小于或大于768px的设备:

<div class="table-responsive">

Bootstrap支持的表格元素:

Bootstrap3学习笔记(三)之表格

以上所述是小编给大家介绍的Bootstrap3学习笔记(三)之表格的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 #Javascript
Bootstrap3学习笔记(二)之排版
May 20 #Javascript
js获取iframe中的window对象的实现方法
May 20 #Javascript
BootStrap3学习笔记(一)之网格系统
May 20 #Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 #Javascript
Bootstrap表格和栅格分页实例详解
May 20 #Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 #Javascript
You might like
php的计数器程序
2006/10/09 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
给排水工程师岗位职责
2013/11/21 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
新手上路标语
2014/06/20 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
python基础之匿名函数详解
2021/04/21 Python
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB