<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>