bootstrap制作选项卡

选项卡定义data属性来触发切换效果。当然前提要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求：

1、选项卡导航链接中要设置 data-toggle=“tab”

2、并且设置 data-target=“对应内容面板的选择符(一般是ID)”；如果是链接的话，还可以通过 href=“对应内容面板的选择符(一般是ID)”，主要作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配
　　案例如下：

	<!--   选项卡菜单-->
	<ul class="nav navbar-nav">
		 <li data-toggle="tab" data-target="#Individual"><a href="#">个人代办</a></li>
		 <li data-toggle="tab" data-target="#Do_ment"><a href="#">公文处理</a></li>
		<li data-toggle="tab" data-target="#Administration"><a href="#">行政管理</a></li>
		<li data-toggle="tab" data-target="#System_set"><a href="#">系统设置</a></li>
	 </ul>
	 <!--   选项卡面板-->
     <div class="tab-content">
        <div class="tab-pane" id="Individual">1</div>
        <div class="tab-pane" id="Do_ment">2</div>
        <div class="tab-pane" id="Administration">3</div>
        <div class="tab-pane" id="System_set">4</div>
    </div>

为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。
在添加 fade 样式时，最初的默认显示的内容面板一定要加上 in 类名，不然用户无法看到其内容