针对BootStrap tab的二次开发

为什么要进行二次开发

在文章列表部分，我们使用了BootStrap的Tab插件。BootStrap中的tab控件是在一小块区域展示大量信息的首选。但是，它的样式比较单一。而在展示文章列表模块时，我希望它可以更美观，而且选项卡可以自动切换。

使用Tab插件

在页面中使用BootStrap的Tab插件的方法如下：

1.在DIV加入role="tabpanel"

加入该属性值后，该DIV则变成了tab插件。

    <div class="tab" role="tabpanel">
    </div>

2.使用列表制作切换标签

列表项即为切换标签项。

    <ul class="nav nav-tabs" role="tablist" style="margin-top:0px;" id="docTabs">
    <li role="presentation" class="active"><a href="#Section_new"
    aria-controls="home" role="tab" data-toggle="tab"> 最新</a></li>
    <!--其余标签卡……-->
    </ul>

代码中可以看出，在超级链接元素（a）中有指向该标签页内容的链接地址，如“最新”标签中，href="#Section_new",而这个地址一定要跟后面的标签内容页（tab-pane）的ID一一对应。

3.标签内容页区域（tab-content）

所有的标签内容页均放在这个区域。

    <div class="tab-content">
        <!--最新-->
        <!--7天热门-->
        <!--30天热门-->
    </div>

4.单个标签页（tab-pane）

tab插件的最小元素，具体的标签内容页。

    <div role="tabpanel" class="tab-pane fade in active" id="Section_new">
        <P>
            tab中的内容
        </P>
    </div>
    <!--其余标签页……-->