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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
JqGrid web打印实现代码
May 31 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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实现ftp上传文件示例
2014/08/21 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
echarts实现折线图的拖拽效果
2019/12/19 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
scrapy爬虫完整实例
2018/01/25 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
初中学生期末评语
2014/04/24 职场文书
初三开学计划书
2014/04/27 职场文书
阳光体育活动总结
2014/04/30 职场文书
个人授权委托书样本
2014/09/13 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
联谊会开场白
2015/06/01 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL