使用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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
vue 自定义右键样式的实例代码
Nov 06 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 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 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
JScript的条件编译
2007/05/29 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
详解Webpack DLL用法以及功能
2017/07/11 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
初学Python函数的笔记整理
2015/04/07 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
python编写微信公众号首图思路详解
2019/12/13 Python
python dataframe NaN处理方式
2019/12/26 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
助学贷款贫困证明
2014/09/23 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang