教大家輕松制作Bootstrap漂亮表格（table）
學習了runoob.com網站中的bootstrap內容之后，參照其中的內容自己做一下總結，以便幫助在這方面有疑惑的朋友，也有助于自己更好的消化所學的內容。
我們應該慶幸自己活在這樣一個互聯網時代，開放、共享。很多之前我們費盡心思去實現的效果已經有前輩為我們總結出來并做成很好的框架，共享出來讓我們使用，使得我們輕松就能實現很漂亮的效果。
下面就使用一個實例來講一下如何使用Bootstrap現成的css樣式直接加在我們的table表格上，我們只需要寫很少的代碼就能輕松制作漂亮表格。
比如我們要制作一個像下面這個表格：
有了Bootstrap，只需寫好html內容結構，加上Bootstrap寫好的專用于表格的類樣式即可實現圖中的效果。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootStrap制作表格</title> <link type="text/css" rel="stylesheet" href="../libs/bootstrap.css"> </head> <body> <div class="container"> <table style="width: 500px;" class="table table-striped table-hover table-bordered"> <thead> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> </thead> <tbody> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td></tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td></tr> <tr> <td>第3行第1列</td> <td>第3行第2列</td> <td>第3行第3列</td></tr> </tbody> </table> </div> </body> </html>
在這里為了方便美觀我給他加了一個寬度500px;我們這里使用一個<div class="container"> 來作為基礎面板包裹我們的table。container也屬于bootstrap類樣式，在webstorm中我們按住ctrl+點擊左鍵進入container（任何腳本樣式你都這樣查看它里邊的實現，前提是要先引入），可以看到bootstrap的屬性如下：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
containner可以適應瀏覽器為我們設置外邊距，設置固定左右內邊距15px。
接下來說一下步驟：
第一步：引入bootstrap腳本文件：
<link type="text/css" rel="stylesheet" href="../libs/bootstrap.css">
這個腳本你可以在 http://getbootstrap.com 官網中下載。
第二步：寫html內容結構代碼。
只設置了寬度，沒有加入其他任何樣式的裸妝他是這樣子的：
第三步：為table加入bootstrap樣式：
<table style="width: 500px;" class="table table-striped table-hover table-bordered">
以上三步即可得到第一幅圖的效果。
接下來講解一下這些樣式的效果，runoob.com列出了比較簡明的解析：
在行列中，也可以使用.active .success .danger這些用于行列的樣式。比如我加入行列樣式：
效果是這樣的：
大家可以根據自己的需要來加入樣式。
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Nuxt.js 是一個基于 Vue.js 的通用應用框架。 通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。這篇文章主要介紹了Nuxt.js開啟SSR渲染 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了JS與jQuery判斷文本框還剩多少字符可以輸入的方法,簡單分析了js字符個數統(tǒng)計的方法,并給出了jQuery字符統(tǒng)計插件textlimit的相關使用方法示例,需要的朋友可以參考下2018-09-09
檢測用戶按鍵...2006-07-07
微信小程序使用websocket通訊的demo，含前后端代碼，親測可用
這篇文章主要介紹了微信小程序使用websocket通訊的demo，含前后端代碼，親測可用,需要的朋友可以參考下2019-05-05
javascript工廠模式和構造函數模式創(chuàng)建對象方法解析
本文主要對javascript工廠模式和構造函數模式創(chuàng)建對象方法進行解析，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
本文主要內容分三部分,第一部分是需求分析,第二部分是實現步驟,第三部分是問題詳解,如果您只需要解決問題,請閱讀第一、二部分即可,如果您有更多時間,進一步學習問題相關知識點,請閱讀至第三部分2023-10-10
Javascript將圖片的絕對路徑轉換為base64編碼的方法
這篇文章主要介紹了Javascript將圖片的絕對路徑轉換為base64編碼的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
JS/HTML5游戲常用算法之碰撞檢測 像素檢測算法實例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測 像素檢測算法,結合實例形式詳細分析了javascript像素檢測碰撞算法的原理、實現步驟及相關操作技巧,需要的朋友可以參考下2018-12-12
利用JavaScript將普通數字轉換為帶有千分位分隔符格式的多種實現方法
如何利用 JavaScript 將普通數字轉換為帶有千分位分隔符的格式,我們將介紹多種方法,包括使用內置的 toLocaleString() 方法、Intl.NumberFormat 對象以及自定義函數來實現數字格式化,需要的朋友可以參考下2023-12-12
js中apply和Math.max()函數的問題及區(qū)別介紹
這篇文章主要介紹了js中apply和Math.max()函數的問題，本文給大家?guī)韮煞N答案，每一種答案給大家介紹的非常詳細，在文章底部給大家提到了js中Math.max.apply和Math.max的區(qū)別，感興趣的朋友一起看看吧2018-03-03