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 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
javascript 回调函数详解
Nov 11 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
layui form表单提交后实现自动刷新
Oct 25 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 json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php并发加锁示例
2016/10/17 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
Python开发的实用计算器完整实例
2017/05/10 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python学生管理系统
2019/01/30 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python
优化Mysql查询的示例
2022/04/26 MySQL