學(xué)習(xí)了runoob.com網(wǎng)站中的bootstrap內(nèi)容之后，參照其中的內(nèi)容自己做一下總結(jié)，以便幫助在這方面有疑惑的朋友，也有助于自己更好的消化所學(xué)的內(nèi)容。
我們應(yīng)該慶幸自己活在這樣一個(gè)互聯(lián)網(wǎng)時(shí)代，開(kāi)放、共享。很多之前我們費(fèi)盡心思去實(shí)現(xiàn)的效果已經(jīng)有前輩為我們總結(jié)出來(lái)并做成很好的框架，共享出來(lái)讓我們使用，使得我們輕松就能實(shí)現(xiàn)很漂亮的效果。
下面就使用一個(gè)實(shí)例來(lái)講一下如何使用Bootstrap現(xiàn)成的css樣式直接加在我們的table表格上，我們只需要寫(xiě)很少的代碼就能輕松制作漂亮表格。
比如我們要制作一個(gè)像下面這個(gè)表格：
有了Bootstrap，只需寫(xiě)好html內(nèi)容結(jié)構(gòu)，加上Bootstrap寫(xiě)好的專用于表格的類樣式即可實(shí)現(xiàn)圖中的效果。
代碼如下：
<!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>
在這里為了方便美觀我給他加了一個(gè)寬度500px;我們這里使用一個(gè)<div class="container"> 來(lái)作為基礎(chǔ)面板包裹我們的table。container也屬于bootstrap類樣式，在webstorm中我們按住ctrl+點(diǎn)擊左鍵進(jìn)入container（任何腳本樣式你都這樣查看它里邊的實(shí)現(xiàn)，前提是要先引入），可以看到bootstrap的屬性如下：
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}containner可以適應(yīng)瀏覽器為我們?cè)O(shè)置外邊距，設(shè)置固定左右內(nèi)邊距15px。
接下來(lái)說(shuō)一下步驟：
第一步：引入bootstrap腳本文件：
<link type="text/css" rel="stylesheet" href="../libs/bootstrap.css">
這個(gè)腳本你可以在 http://getbootstrap.com 官網(wǎng)中下載。
第二步：寫(xiě)html內(nèi)容結(jié)構(gòu)代碼。
只設(shè)置了寬度，沒(méi)有加入其他任何樣式的裸妝他是這樣子的：
第三步：為table加入bootstrap樣式：
<table style="width: 500px;" class="table table-striped table-hover table-bordered">
以上三步即可得到第一幅圖的效果。
接下來(lái)講解一下這些樣式的效果，runoob.com列出了比較簡(jiǎn)明的解析：
在行列中，也可以使用.active .success .danger這些用于行列的樣式。比如我加入行列樣式：
效果是這樣的：
大家可以根據(jù)自己的需要來(lái)加入樣式。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
