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 typeof 用法
Dec 28 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
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 strtok()函数的优点分析
2010/03/02 PHP
php简单防盗链实现方法
2015/07/29 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
使用正则替换变量
2007/05/05 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python实现词法分析器
2019/01/31 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
同学会邀请书大全
2014/01/12 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
用Python生成会跳舞的美女
2022/01/18 Python