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 相关文章推荐
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
Vue实现附件上传功能
May 28 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 array_search() 函数使用
2010/04/13 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
js style动态设置table高度
2014/10/21 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
Angular Material Icon使用详解
2018/11/07 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
python实现备份目录的方法
2015/08/03 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python实现猜数字游戏
2020/03/25 Python
基于Python中的yield表达式介绍
2019/11/19 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python中无限循环需要什么条件
2020/05/27 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
python字典的值可以修改吗
2020/06/29 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
紧急迫降观后感
2015/06/15 职场文书
社会实践心得体会范文
2016/01/14 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
你真的会用Mysql的explain吗
2022/03/31 MySQL