针对BootStrap中tabs控件的美化和完善.doc

针对BootStrap中tabs控件的美化和完善.doc针对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给选项卡添加新的背景颜色改变其原有的样式(新增一个指向信息展示区的下三角),