使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条


Posted in Javascript onJanuary 04, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html> 
<head>
 <!-- 引入的css压缩文件 -->
 <link rel="stylesheet" type="text/css"
  href="<%=request.getContextPath()%>/resources/css/bootstrap.min.css">
 </head>
 <body>
 <div class="table-responsive">
  <table class="table table-hover table-bordered">
  <caption>
   边框表格布局
  </caption>
  <thead>
   <tr style="background: silver;">
   <th>
    名称
   </th>
   <th>
    城市
   </th>
   <th>
    密码
   </th>
   <th>
    名称
   </th>
   <th>
    城市
   </th>
   <th>
    密码
   </th>
   </tr>
  </thead>
  <tbody>
   <tr class="success">
   <td>
    Tanmay
   </td>
   <td>
    Bangalore
   </td>
   <td>
    560001
   </td>
   <td>
    Tanmay
   </td>
   <td>
    Bangalore
   </td>
   <td>
    560001
   </td>
   </tr>
   <tr class="active">
   <td>
    Sachin
   </td>
   <td>
    Mumbai
   </td>
   <td>
    400003
   </td>
   <td>
    Tanmay
   </td>
   <td>
    Bangalore
   </td>
   <td>
    560001
   </td>
   </tr>
   <tr class="warning">
   <td>
    Uma
   </td>
   <td>
    Pune
   </td>
   <td>
    411027
   </td>
   <td>
    Tanmay
   </td>
   <td>
    Bangalore
   </td>
   <td>
    560001
   </td>
   </tr>
   <tr class="danger">
   <td>
    Uma
   </td>
   <td>
    Pune
   </td>
   <td>
    411027
   </td>
   <td>
    Tanmay
   </td>
   <td>
    Bangalore
   </td>
   <td>
    560001
   </td>
   </tr>
  </tbody>
  </table>
 </div>
 <!-- 最后引入js,提高页面加载速度 ,由于这里用的是bootstrap3,所以jquery文件必须是1.9.1以上版本-->
 <script type="text/javascript" language="javascript"
  src='<%=request.getContextPath()%>/js/bootstrap/jquery-1.9.1.js'>
</script>
 <!-- 引入的js压缩文件 -->
 <script type="text/javascript" language="javascript"
  src='<%=request.getContextPath()%>/js/bootstrap/bootstrap.min.js'>
</script>
 </body>
</html>
</pre>
<pre name="code" class="html">

以上所述是小编给大家介绍的使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 #Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 #Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 #Javascript
AngularJS入门示例之Hello World详解
Jan 04 #Javascript
详解AngularJS验证、过滤器、指令
Jan 04 #Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 #Javascript
javascript 注释代码的几种方法总结
Jan 04 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python中除法使用的注意事项
2014/08/21 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
python实现简单图片物体标注工具
2019/03/18 Python
python实现支付宝转账接口
2019/05/07 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
比较一下entity bean和session bean
2013/12/27 面试题
教研处工作方案
2014/05/26 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
医院病假条怎么写
2015/08/17 职场文书
环保建议书作文500字
2015/09/14 职场文书
周末问候语大全
2015/11/10 职场文书