1、1针对 BootStrap 中 tabs 控件的美化和完善【摘 要】BootStrap 以其简单好用和跨平台性，逐渐成为 web前端开发的首选，其中含有丰富的控件，Tab 就是一个会经常用到的控件。然而 BootStrap中的原生 Tab样式不是很美观，而且也没有赋予其行为。本文主要介绍对该 Tab控件的美化及赋予其与用户的交互行为。 【关键词】BootStrap，tab，Web 前端，Jquery 一、BootStrap BootStrap 是 Twitter退出一款前端框架。它是基于 HTML、CSS 和JavaScript之上构建的。它简单好用，使 Web开发更加容易和便捷。它主要是由
2、Twitter的 web设计人员 MarkOtto和 Jacob Thornton使用 CSS动态语言 Less合作携程。它提供了优雅简洁的 HTMl和 CSS规范。推出以后大受好评，一直以是 GitHub上最热的开源项目。很多有名的公司和机构都使用了该框架：包括 NASA和 MSNBC（微软全国广播公司）的Breaking News以及一些国内以移动为先的开发框架如 Wex5就是基于BootStrap源码进行性能优化而来。 二、关于 BootStrap的 Tab控件 1、使用场合 Tab 控件可以利用较小的版面篇幅来展现大量的信息，是网站首页常用控件之一。它将所有的信息分别罗列在几个选项卡中
3、，当用户点击不同的选项卡会切换不同的信息区域。 22、Tab 控件的结构 该控件分为选项卡区和信息展示区。 （1）选项卡区 该区域通常含有该选项卡的分类名称，如展示新闻的 Tab可能会分为“国内” ， “国外”等选项卡等。用户正是点击该区域来查看它们想看的信息内容。 该区域使用了 HTML的列表来完成，每个列表项就是选项卡的名称。选项卡中包含了一个超级链接，该链接的地址指向该选项卡所对应的列表地址（列表 ID） 。 （2）信息展示区 当用户点击选项卡时就会看到相应的信息展示。如上述 HTML代码中，当用户点击“最新”选项卡的时候，就能看到网站中所发布的所有最新文章的信息展示区。 每个 DIV的
4、 ID是唯一的，对应于前面选项卡的链接所指向的地址。 为什么要修改 BootStrap的 Tab控件 BootStrap 中的 tab控件以其简单易用而很受广大开发者的欢迎。但是，它有几个缺点。 3、它的样式比较单一 BootStrap 原生的 Tab控件的样式比较简单，是比较传统的标签页的样式，如果对界面没有要求的话可以直接拿来使用。然而，在实际应用中，为了让用户能喜欢自己的网站或应用，我们一般会采用更好看的界面设计。 34、缺乏与用户的交互 原生的 BootStrap Tab，当用户单机某个选项卡就会呈现该选项卡中的内容。而我们在网站的首页总是希望能够给用户推送足够多的有用信息，我们希望给
5、 Tab增加一些动态的效果轮换展现各个信息区。这样即使用户不主动点击切换选项卡，也可以自动展示网站信息。 三、实现原理 1、界面的美化 我们知道在 BootStrap中所有元素的样式都是通过 CSS来控制的，那么要改变 Tab控件的样式，就需要些新的 CSS代码覆盖原有的默认CSS。 （1）选项卡部分的美化 我们通过 CSS给选项卡添加新的背景颜色改变其原有的样式（新增一个指向信息展示区的下三角） ，当选中某选项卡时用亮色显示，同时改变选项卡名称的字体样式。 （2）信息展示区的美化 信息展示区主要设置信息内容的内外边距，字体大小，行高，边框等样式，让其看起来比较舒服即可。 2、交互行为的添加
6、由于 BootStrap中的所有元素的行为都是通过 JavaScript来控制的，那么我们引入 JQuery后就可以使用 JQuery来重新定义其行为，我们希望在 Tab中添加的交互行为包括： （1）Tab 自动轮换 4a） 选项卡每隔一定时间会自动切换，切换时间可以自己设置。 b） 当用户将鼠标悬停到选项可得时候，停止切换 c） 鼠标移开，继续切换 实现过程： 我们新建一个函数 timer用于建立一个计时器，该函数接收一个标签项索引作为参数，当计时时间到的时候就会显示当前标签项所对应的信息展示区而隐藏其他信息展示区。在页面加载完成后遍历每个标签页，为其添加监听函数，当监听到鼠标悬停（mous
7、eover）事件，停止切换，当监听到鼠标移开（mouseout）事件后，继续切换。 总结 本文介绍了一种修改 BootStrap原生 Tab控件的样式和行为的方法。当然，这种方法对其他的 BootStrap控件也是适用的。由于 BootStrap是基于 HTML和 CSS及 JavaScript的，那么，我们就可以通过修改 CSS来控制其元素的样式，通过 JavaScript来修改其原生控件的行为。 参考文献： 1BootStrap 前端框架。Bootstrap 中文网http：/ 2跨端移动开发框架 WeX5 .开源中国社区引用日期 2015-06-11 http：/ 3 周玲余：基于 jQuery框架的页面前端特效的设计与实现J，计算机与现代化，2013 年 01期。 4王晶、温向彬：利用 jQuery操作 HTML元素J农业网络信5息，2008 年 04期。 5 李冲、 熊淑华、 魏颖颖：基于 CSS与 JavaScript技术的Tab面板的设计与实现J 计算机技术与发展，2011 年 03期
