Bootstrap table表格簡單操作

更新時(shí)間：2017年02月07日 09:21:00 作者：逆方向

這篇文章主要為大家詳細(xì)介紹了Bootstrap table表格簡單操作的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Bootstrap table表格簡單實(shí)例分享給大家，供大家參考，具體內(nèi)容如下

使用類 Class="table" 既可讓table美化樣式

table 相關(guān)的Class

隔行換色： table-striped

鼠標(biāo)懸停效果： table-hover

表格的邊框：table-bordered

表頭顏色：class="danger" Success 等幾種顏色

1.頁面添加引用

<script src="../Bootstrap/jquery-3.1.1.js"></script>
 <script src="../Bootstrap/js/bootstrap.min.js"></script>
 <link href="../Bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />

2. 代碼實(shí)現(xiàn)

 <table class="table table-striped table-hover table-bordered">
   <thead>
    <tr class="danger"> <%--表頭顏色--%>
     <td>姓名</td>
     <td>年齡</td>
     <td>性別</td>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>張三</td>
     <td>20</td>
     <td>男</td>
    </tr>
   </tbody>
   </table>

3.頁面效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序之滑動(dòng)頁面隱藏和顯示組件功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序之滑動(dòng)頁面隱藏和顯示組件功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
Js+Flash實(shí)現(xiàn)訪問剪切板操作
最近需要遇到了這個(gè)問題點(diǎn)擊按鈕復(fù)制鏈接的功能果斷度娘谷哥,最后找到得解決方案ZeroClipBoard一款開源得js+Flash實(shí)現(xiàn)得剪切板操作
2012-11-11
ES6正則的擴(kuò)展實(shí)例詳解
這篇文章主要介紹了ES6正則的擴(kuò)展,結(jié)合實(shí)例形式詳細(xì)分析了ES6正則操作常用的修飾符、模式、屬性、方法及相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
KnockoutJs快速入門教程
這篇文章主要為大家分享了KnockoutJs快速入門教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中，感興趣的小伙伴們可以參考一下
2016-05-05
bootstrap使用validate實(shí)現(xiàn)簡單校驗(yàn)功能
這篇文章主要為大家詳細(xì)介紹了bootstrap使用validate實(shí)現(xiàn)簡單校驗(yàn)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
二級域名或跨域共享Cookies的實(shí)現(xiàn)方法
適用于Asp。在主域名設(shè)置的Cookie，在各子域名共用；適用于博客等提供二級域名。這個(gè)問題，以網(wǎng)上有眾多帖子，可惜都沒有完整解決。
2008-08-08
JS document form表單元素操作完整示例
這篇文章主要介紹了JS document form表單元素操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript form表單元素獲取、輸出、遍歷等相關(guān)操作技巧,需要的朋友可以參考下
2020-01-01
JS正則表達(dá)式修飾符中multiline(/m)用法分析
這篇文章主要介紹了JS正則表達(dá)式修飾符中multiline(/m)用法,結(jié)合實(shí)例形式分析了JS正則中多行模式multiline的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
uniapp與webview之間的相互傳值的實(shí)現(xiàn)
這篇文章主要介紹了uniapp與webview之間的相互傳值的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
JavaScript中計(jì)算網(wǎng)頁中某個(gè)元素的位置
這篇文章主要介紹了JavaScript中計(jì)算網(wǎng)頁中某個(gè)元素的位置,本文先是講解了一些必要的知識和實(shí)現(xiàn)難點(diǎn),然后給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
2015-06-06