使用BootStrap實(shí)現(xiàn)表格隔行變色及hover變色并在需要時(shí)出現(xiàn)滾動(dòng)條
更新時(shí)間：2017年01月04日 10:28:31 投稿：mrr
這篇文章主要介紹了使用BootStrap實(shí)現(xiàn)表格隔行變色及hover變色并在需要時(shí)出現(xiàn)滾動(dòng)條效果,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<%@ 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實(shí)現(xiàn)表格隔行變色及hover變色并在需要時(shí)出現(xiàn)滾動(dòng)條，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家?guī)硪黄贐ootstrap框架菜鳥入門教程(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
圖表組件Chart.js是Bootstrap比較好用的組件之一,與一款收費(fèi)的組件highchart類似,效果上來看免費(fèi)與收費(fèi)的產(chǎn)品相差還是有一點(diǎn)點(diǎn)的，不過功能上差不多能滿足我們項(xiàng)目的需要，本文給大家介紹Bootstrap Chart組件使用，需要的朋友參考下吧2016-04-04
JS是通過事件隊(duì)列(Event?Loop)的方式來實(shí)現(xiàn)異步回調(diào)的，但對(duì)很多初學(xué)JS的人來說，根本搞不清楚單線程的JS為什么擁有異步的能力，所以本文將從進(jìn)程、線程的角度來解釋這個(gè)問題2023-05-05
Javascript Web Slider 焦點(diǎn)圖示例源碼
Slider 焦點(diǎn)圖會(huì)在很多的網(wǎng)站上見到，在本文為大家詳細(xì)介紹下具體的實(shí)現(xiàn)過程，下面的源碼大家可以運(yùn)行下2013-10-10
JavaScript中的迭代器和可迭代對(duì)象與生成器
這篇文章主要介紹了JavaScript中的迭代器和可迭代對(duì)象與生成器，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
js中的傳值方式,對(duì)于簡(jiǎn)單類型(好比字符串和數(shù)值)就是值傳遞和引用傳遞,下面這篇文章主要給大家介紹了關(guān)于JavaScript傳參的6種方式,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Redux的基本使用過程詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
div當(dāng)滾動(dòng)到頁面頂部的時(shí)候固定在頂部實(shí)例代碼
使用Javascript實(shí)現(xiàn)了滾動(dòng)頁面時(shí)，DIV到達(dá)頂部時(shí)固定在頂部。在IE下效果有點(diǎn)閃，具體代碼如下，感興趣的朋友可以參考下哈2013-05-05
vite添加環(huán)境變量import.meta.env的方法
在不同的文件里面配置不同的環(huán)境變量,可以讓我們的配置更加容易維護(hù)和使用,這里我們說下vite配置環(huán)境變量和模式是怎么配置的,對(duì)vite環(huán)境變量相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要為大家詳細(xì)介紹了Bootstrap 警告框（Alert）插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03