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>