<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">首页</a></li> <li><a href="#setting1" data-toggle="tab">设置1</a></li> <li><a href="#setting2" data-toggle="tab">设置2</a></li> <li><a href="#setting3" data-toggle="tab">设置3</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home"> <p>首页内容：...</p> </div> <div class="tab-pane" id="setting1"> <p>分页内容1：...</p> </div> <div class="tab-pane" id="setting2"> <p>分页内容2：...</p> </div> <div class="tab-pane" id="setting3"> <p>分页内容3：...</p> </div> </div> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
原文：http://my.oschina.net/iNiL0119/blog/485958