针对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期