项目组之前用Bootstrap3搭了一个管理平台，当时有一个很急的需求，需要用到标签页展示，对Bootstrap3不熟悉，就用jquery-ui写一个标签页。但是jquery-ui展示出来的标签页跟Bootstrap的整体框架十分不搭。正要这个需求有变化，就干脆用Bootstrap重写了这个标签页，中间遇到了些小麻烦。我前端技术很菜，就把这个功能当做一个demo记录下来吧。

    首先导入必要的bootstrap和jquery资源。

    <script src=http://www.mamicode.com/"/js/jquery-1.11.1.js" type="text/javascript"></script>>    
    标签页头的示例代码如下：
<ul id="patchTab" class="nav nav-tabs">
	#foreach($client in $!clientList)
		<li class="">
			<a href=http://www.mamicode.com/"#$!{client.clientType}" data-toggle="tab">$!{client.clientType}>    ul标签的class需要 .nav .nav-tabs类。a标签的href的值十分的重要，它的值直接跟标签页下面的内容div的id关联。
    
    标签页的内容代码如下：
<div id="patchTabContent" class="tab-content">
	#foreach($client in $!clientList)
        <div class="datatable tab-pane fade" id="$!{client.clientType}">
            <table >
            	
            </table>
        </div>
	#end
</div>
    内容div的class需要加入.tab-pane就可以了，.fade是淡入淡出的效果，.datatable是定义表格的样式。div的id一定要和上面的a标签的href值一样！但是a标签的href值是以 ‘#’ 号打头的。而这个div的id不能带有 ‘#’ 号。
    再加上点击事件的js就OK了。
$(function() {
	$('#patchTab a').click(function(e) {
		e.preventDefault();
		$(this).tab('show');
	});
});


Bootstrap3标签页demo