使用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 统计时间
Mar 09 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
React优化子组件render的使用
May 12 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
浅析vue-router中params和query的区别
2019/12/24 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
保护环境倡议书300字
2014/05/19 职场文书
员工评语范文
2014/12/31 职场文书
狂人日记读书笔记
2015/06/30 职场文书
升学宴学生致辞
2015/07/27 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
Python OpenGL基本配置方式
2022/05/20 Python