如何實現(xiàn)bootstrap3.0多種表格效果-創(chuàng)新互聯(lián)

這篇文章主要講解了“如何實現(xiàn)bootstrap3.0多種表格效果”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何實現(xiàn)bootstrap3.0多種表格效果”吧！

成都創(chuàng)新互聯(lián)公司主營郊區(qū)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),郊區(qū)h5微信小程序開發(fā)搭建,郊區(qū)網(wǎng)站營銷推廣歡迎郊區(qū)等地區(qū)企業(yè)咨詢

基本案例

為任意

標簽添加.table可以為其賦予基本的樣式—少量的內(nèi)補（padding）和水平方向的分隔線。這種方式看起來很多余??？但是我們覺得，表格元素使用的很廣泛，如果我們?yōu)槠滟x予默認樣式可能會影響例如日歷和日期選擇之類的插件，所以我們選擇將其樣式獨立出來。

一個簡單的Table示例

代碼如下:

   

 
       
       
         
           
         
           
         
       
       
         
           
         
           
       
         
           
         
           
       
       
   

Table基本案例

First Name	Last Name	User Name
aehyok	leo	@aehyok
lynn	thl	@lynn

 

條紋狀表格

利用.table-striped可以給之內(nèi)的每一樣增加斑馬條紋樣式。

在上面示例的table元素上再添加一個樣式類

代碼如下:

看現(xiàn)在的效果，還是有點變化的。

帶邊框的表格

利用.table-bordered為表格和其中的每個單元格增加邊框。

還是將第一個示例中的table元素上再添加一個樣式類

代碼如下:

鼠標懸停

利用.table-hover可以讓中的每一行響應(yīng)鼠標懸停狀態(tài)。

代碼如下:

將鼠標移到那一行那一行就會有效果的

緊縮表格

利用.table-condensed可以讓表格更加緊湊，單元格中的內(nèi)部（padding）均會減半。

代碼如下:

這個效果沒那么明顯，主要就是單元格中內(nèi)容padding減半了。

狀態(tài)Class

通過這些狀態(tài)class可以為行貨單元格設(shè)置顏色。

代碼如下:

Table


#
FirstName
LastName
UserName




1
aehyok
leo
@aehyok


2
lynn
thl
@lynn


3
Amdy
Amy
@Amdy


4
Amdy
Amy
@Amdy


5
Amdy
Amy
@Amdy

響應(yīng)式表格

將任何.table包裹在.table-responsive中即可創(chuàng)建響應(yīng)式表格，其會在小屏幕設(shè)備上（小于768px）水平滾動。當屏幕大于768px寬度時，水平滾動條消失。

代碼如下:

Table


#
FirstName
LastName
UserName




1
aehyok
leo
@aehyok


2
lynn
thl
@lynn


3
Amdy
Amy
@Amdy


4
Amdy
Amy
@Amdy


5
Amdy
Amy
@Amdy