脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap hover

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

 更新时间：2017年01月04日 10:28:31   投稿：mrr  
这篇文章主要介绍了使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条效果,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下

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

<%@ 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变色并在需要时出现滚动条，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 基于Bootstrap框架菜鸟入门教程(推荐)

    基于Bootstrap框架菜鸟入门教程(推荐)

    下面小编就为大家带来一篇基于Bootstrap框架菜鸟入门教程(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Bootstrap Chart组件使用教程

    Bootstrap Chart组件使用教程

    图表组件Chart.js是Bootstrap比较好用的组件之一,与一款收费的组件highchart类似,效果上来看免费与收费的产品相差还是有一点点的，不过功能上差不多能满足我们项目的需要，本文给大家介绍Bootstrap Chart组件使用，需要的朋友参考下吧
    2016-04-04
  • JS进阶之从多线程到Event Loop全面梳理

    JS进阶之从多线程到Event Loop全面梳理

    JS是通过事件队列(Event Loop)的方式来实现异步回调的，但对很多初学JS的人来说，根本搞不清楚单线程的JS为什么拥有异步的能力，所以本文将从进程、线程的角度来解释这个问题
    2023-05-05
  • Javascript Web Slider 焦点图示例源码

    Javascript Web Slider 焦点图示例源码

    Slider 焦点图会在很多的网站上见到，在本文为大家详细介绍下具体的实现过程，下面的源码大家可以运行下
    2013-10-10
  • JavaScript中的迭代器和可迭代对象与生成器

    JavaScript中的迭代器和可迭代对象与生成器

    这篇文章主要介绍了JavaScript中的迭代器和可迭代对象与生成器，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • JavaScript传参的6种方式总结

    JavaScript传参的6种方式总结

    js中的传值方式,对于简单类型(好比字符串和数值)就是值传递和引用传递,下面这篇文章主要给大家介绍了关于JavaScript传参的6种方式,需要的朋友可以参考下
    2023-03-03
  • Redux的基本使用过程步骤详解

    Redux的基本使用过程步骤详解

    这篇文章主要介绍了Redux的基本使用过程详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • div当滚动到页面顶部的时候固定在顶部实例代码

    div当滚动到页面顶部的时候固定在顶部实例代码

    使用Javascript实现了滚动页面时，DIV到达顶部时固定在顶部。在IE下效果有点闪，具体代码如下，感兴趣的朋友可以参考下哈
    2013-05-05
  • vite添加环境变量import.meta.env的方法

    vite添加环境变量import.meta.env的方法

    在不同的文件里面配置不同的环境变量,可以让我们的配置更加容易维护和使用,这里我们说下vite配置环境变量和模式是怎么配置的,对vite环境变量相关知识感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • Bootstrap警告框（Alert）插件使用方法

    Bootstrap警告框（Alert）插件使用方法

    这篇文章主要为大家详细介绍了Bootstrap 警告框（Alert）插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论