大佬教程收集整理的这篇文章主要介绍了bootstrap 标签切换，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap 实例 - 标签页（Tab）插件</title> 5 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 7 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 8 </head> 9 <body> 10 11 <ul id="myTab" class="nav nav-tabs"> 12 <li class="active col-md-4"><a href="#dingcan" data-toggle="tab">订餐</a></li> 13 <li class="col-md-4"><a href="#yonghu" data-toggle="tab">用户中心</a></li> 14 <li class="col-md-4"><a href="#dingdan" data-toggle="tab">订单中心</a></li> 15 </ul> 16 <div id="myTabContent" class="tab-content"> 17 <div class="tab-pane fade in active" id="dingcan"> 18 <p>订餐</p> 19 </div> 20 <div class="tab-pane fade" id="yonghu"> 21 <p>用户中心</p> 22 </div> 23 <div class="tab-pane fade" id="dingdan"> 24 <p>订单中心</p> 25 </div> 26 27 </div> 28 </body> 29 </html>
效果图
以上是大佬教程为你收集整理的bootstrap 标签切换全部内容，希望文章能够帮你解决bootstrap 标签切换所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。