Bootstrap完成分页效果的实现（标签页）

<div class="container">    <h3>        bootstrap给予JQ提供了十几个插件，每个插件对于一个*.js文件，可以单独引用，也可以整体引用(bootstrap.js),和JQ.UI是同一级的库！        比JQ.UI多css样式。但是这个JS比JQ.UI复杂，因为中间加了样式    </h3>    <h3>调用上述插件，可以用两种方式：第一种是传统的JS方式，根据JQ的  $("").dropdown();        第二种是通过data-*属性来调用，不用写JS代码  <a  data-toggle="dropdown">a</a>,推荐使用这种    </h3>    <h3>在H5的标签中有2中属性,任何标签加 角色-role=""或者aria-*=""(无障碍阅读)     VDA读屏软件</h3>    <h3> 若  role="button "可以放到B标签中，用于读屏软件 </h3></div><div class="container">    <h2>这是使用bootstrap的JQ插件---标签页</h2>    <h2>注意观察下面class中的active   in</h2>    <ul class="nav nav-tabs">        <li><a href="#page1" data-toggle="tab">十元套餐</a></li>        <li class="active"><a href="#page2" data-toggle="tab">二十元套餐</a></li>        <li><a href="#page3" data-toggle="tab">三十元套餐</a></li>    </ul>    <!--在下面的div中个class=fade,在页面刷新的时候要显示的区域加in-->    <div class="tab-content">        <div    id="page1" class="tab-pane  fade">十元套餐的详情</div>        <div    id="page2" class="tab-pane active fade in">二十元套餐的详情</div>        <div   id="page3"  class="tab-pane fade">三十元套餐的详情</div>    </div></div>

 

<script src="js/jquery-1.11.3.js" rel="stylesheet"></script><script src="js/bootstrap.min.js" rel="stylesheet"></script>