Bootstrap table表格简单操作


Posted in Javascript onFebruary 07, 2017

Bootstrap table表格简单实例分享给大家,供大家参考,具体内容如下

使用类 Class="table" 既可让table美化样式

 table 相关的Class

隔行换色 : table-striped

鼠标悬停效果: table-hover

表格的边框:table-bordered

表头颜色:class="danger"  Success  等几种颜色

 1.页面添加引用

<script src="../Bootstrap/jquery-3.1.1.js"></script>
 <script src="../Bootstrap/js/bootstrap.min.js"></script>
 <link href="../Bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />

2. 代码实现

<table class="table table-striped table-hover table-bordered">
   <thead>
    <tr class="danger"> <%--表头颜色--%>
     <td>姓名</td>
     <td>年龄</td>
     <td>性别</td>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>张三</td>
     <td>20</td>
     <td>男</td>
    </tr>
   </tbody>
   </table>

3.页面效果

Bootstrap table表格简单操作

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 #Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 #Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 #Javascript
深入理解JavaScript中的for循环
Feb 07 #Javascript
vue实现ToDoList简单实例
Feb 07 #Javascript
js Canvas绘制圆形时钟教程
Feb 06 #Javascript
JS中静态页面实现微信分享功能
Feb 06 #Javascript
You might like
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
php实现的CSS更新类实例
2014/09/22 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
js常用代码段整理
2011/11/30 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
python集合常见运算案例解析
2019/10/17 Python
jupyter notebook实现显示行号
2020/04/13 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
海飞丝广告词
2014/03/20 职场文书
人大代表选举标语
2014/10/07 职场文书
2014年文员工作总结
2014/11/18 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技