亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

教大家輕松制作Bootstrap漂亮表格（table）

 更新時(shí)間：2016年12月13日 11:29:20   作者：Tiramisu_C  
這篇文章主要為大家詳細(xì)介紹了Bootstrap輕松制作漂亮表格table的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

學(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è)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

相關(guān)文章

最新評(píng)論