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>
效果图
