針對BootStrap中tabs控件的美化和完善

劉迎春 祝輝

【摘 要】BootStrap以其簡單好用和跨平臺性，逐漸成為web前端開發的首選，其中含有豐富的控件，Tab就是一個會經常用到的控件。然而BootStrap中的原生Tab樣式不是很美觀，而且也沒有賦予其行為。本文主要介紹對該Tab控件的美化及賦予其與用戶的交互行為。

【關鍵詞】BootStrap，tab，Web前端，Jquery

一、BootStrap

BootStrap是Twitter退出一款前端框架。它是基于HTML、CSS和JavaScript之上構建的。它簡單好用，使Web開發更加容易和便捷。它主要是由Twitter的web設計人員MarkOtto和Jacob Thornton使用CSS動態語言Less合作攜程。它提供了優雅簡潔的HTMl和CSS規范。推出以后大受好評，一直以是GitHub上最熱的開源項目。很多有名的公司和機構都使用了該框架：包括NASA和MSNBC（微軟全國廣播公司）的Breaking News以及一些國內以移動為先的開發框架如Wex5就是基于BootStrap源碼進行性能優化而來。

二、關于BootStrap的Tab控件

1、使用場合

Tab控件可以利用較小的版面篇幅來展現大量的信息，是網站首頁常用控件之一。它將所有的信息分別羅列在幾個選項卡中，當用戶點擊不同的選項卡會切換不同的信息區域。

2、Tab控件的結構

該控件分為選項卡區和信息展示區。

（1）選項卡區

該區域通常含有該選項卡的分類名稱，如展示新聞的Tab可能會分為“國內”，“國外”等選項卡等。用戶正是點擊該區域來查看它們想看的信息內容。

該區域使用了HTML的列表來完成，每個列表項就是選項卡的名稱。選項卡中包含了一個超級鏈接，該鏈接的地址指向該選項卡所對應的列表地址（列表ID）。

（2）信息展示區

當用戶點擊選項卡時就會看到相應的信息展示。如上述HTML代碼中，當用戶點擊“最新”選項卡的時候，就能看到網站中所發布的所有最新文章的信息展示區。

每個DIV的ID是唯一的，對應于前面選項卡的鏈接所指向的地址。

為什么要修改BootStrap的Tab控件

BootStrap中的tab控件以其簡單易用而很受廣大開發者的歡迎。但是，它有幾個缺點。

3、它的樣式比較單一

BootStrap原生的Tab控件的樣式比較簡單，是比較傳統的標簽頁的樣式，如果對界面沒有要求的話可以直接拿來使用。然而，在實際應用中，為了讓用戶能喜歡自己的網站或應用，我們一般會采用更好看的界面設計。

4、缺乏與用戶的交互

原生的BootStrap Tab，當用戶單機某個選項卡就會呈現該選項卡中的內容。而我們在網站的首頁總是希望能夠給用戶推送足夠多的有用信息，我們希望給Tab增加一些動態的效果——輪換展現各個信息區。這樣即使用戶不主動點擊切換選項卡，也可以自動展示網站信息。

三、實現原理

1、界面的美化

我們知道在BootStrap中所有元素的樣式都是通過CSS來控制的，那么要改變Tab控件的樣式，就需要些新的CSS代碼覆蓋原有的默認CSS。

（1）選項卡部分的美化

我們通過CSS給選項卡添加新的背景顏色改變其原有的樣式（新增一個指向信息展示區的下三角），當選中某選項卡時用亮色顯示，同時改變選項卡名稱的字體樣式。

（2）信息展示區的美化

信息展示區主要設置信息內容的內外邊距，字體大小，行高，邊框等樣式，讓其看起來比較舒服即可。

2、交互行為的添加

由于BootStrap中的所有元素的行為都是通過JavaScript來控制的，那么我們引入JQuery后就可以使用JQuery來重新定義其行為，我們希望在Tab中添加的交互行為包括：

（1）Tab自動輪換

a） 選項卡每隔一定時間會自動切換，切換時間可以自己設置。

b） 當用戶將鼠標懸停到選項可得時候，停止切換

c） 鼠標移開，繼續切換

實現過程：

我們新建一個函數timer用于建立一個計時器，該函數接收一個標簽項索引作為參數，當計時時間到的時候就會顯示當前標簽項所對應的信息展示區而隱藏其他信息展示區。在頁面加載完成后遍歷每個標簽頁，為其添加監聽函數，當監聽到鼠標懸停（mouseover）事件，停止切換，當監聽到鼠標移開（mouseout）事件后，繼續切換。

總結

本文介紹了一種修改BootStrap原生Tab控件的樣式和行為的方法。當然，這種方法對其他的BootStrap控件也是適用的。由于BootStrap是基于HTML和CSS及JavaScript的，那么，我們就可以通過修改CSS來控制其元素的樣式，通過JavaScript來修改其原生控件的行為。

參考文獻：

[1]BootStrap前端框架。Bootstrap中文網http：//www.bootcss.com/

[2]跨端移動開發框架WeX5 .開源中國社區[引用日期2015-06-11] http：//www.oschina.net/p/x5？fromerr=tnuMBBME

[3] 周玲余：《基于jQuery框架的頁面前端特效的設計與實現》[J]，計算機與現代化，2013年01期。

[4]王晶、溫向彬：《利用jQuery操作HTML元素》[J]農業網絡信息，2008年04期。

[5] 李沖、 熊淑華、 魏穎穎：《基于CSS與JavaScript技術的Tab面板的設計與實現》[J] 計算機技術與發展，2011年03期