可以在一个网页内切换，也可以跳到其他页面，强力建议导航的标签页上的链接，都跳到其他与此页同样布局的网页。也就是同样存在此标签页，且位置一模一样的页面。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Togglabletabs</title> <meta content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="https://www.jb51.net/css/bootstrap.css" media="screen"> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.11.1.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap.js"></script> </head> <body> <div> <ul role="tablist"> <!--一个标签页组仅能有一个标签是active状态--> <li role="presentation"> <!--以为跳到本页的home图层，不建议这样做，因为如果都写到一页的话，一页会占用很多代码--> <a href="#home" role="tab" data-toggle="tab">Home</a> </li> <li role="presentation"> <a href="#profile" role="tab" data-toggle="tab">Profile</a> </li> <li role="presentation"> <a href="#messages" role="tab" data-toggle="tab">Messages</a> </li> <li role="presentation"> <a href="#settings" role="tab" data-toggle="tab">Settings</a> </li> <!--蕴含着下拉菜单的写法--> <li role="presentation"> <a data-toggle="dropdown" href="#"> <!--这是下拉菜单的那个小三角形--> Dropdown <span></span> </a> <ul role="menu"> <li role="presentation"> <a href="#home" role="tab" data-toggle="tab">Home</a> </li> <li role="presentation"> <a href="#profile" role="tab" data-toggle="tab">Profile</a> </li> <li role="presentation"> <a href="#messages" role="tab" data-toggle="tab">Messages</a> </li> <li role="presentation"> <a href="#settings" role="tab" data-toggle="tab">Settings</a> </li> </ul> <!--最后都跳到其他样式都相同的页，让浏览者感到没有跳转就对了，这样分开代码，以免一个网页的代码都集中在一个页面--> <li role="presentation"> <a href="https://www.jb51.net/back.html" role="tab">The other pages</a> </li> </li> </ul> <!--如果标签页是跳到本页图层的，就在这里写图层的内容。--> <div> <div role="tabpanel"> Home </div> <div role="tabpanel"> Profile </div> <div role="tabpanel"> Messages </div> <div role="tabpanel"> Settings </div> </div> </div> </body> </html>
二、选择按钮组
这段笔者改了又改，主要是笔者对于此组件的理解不够透彻。
一个铺满页面的选择按钮组基本样式如下，
会随着浏览器的尺寸改变而改变，当然，当被压缩到极致时，不会像bootstrap自带的导航条navbar那样收起来，静静地躺在一个按钮中，
这种选择按钮组是可以毫无疑问地兼容IE8的，只是没有下拉菜单的按钮组其实是一个超级链接，用<a>标签，而不是<button>标签，但对比于一般的<a>标签，此<a>标签的class上button的代码，具体见代码。此按钮组的代码实在是太特殊了。
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按钮组buttongroup</title> <meta content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="https://www.jb51.net/css/bootstrap.css" media="screen"> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.11.1.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap.js"></script> </head> <body> <!--要求按钮组铺满整个页面--> <div> <div> <!--不存在下拉菜单的按钮这样写，为按钮定义链接比较少见，请注意--> <a href="#"> Left </a> </div> <div> <button type="button"> Middle </button> </div> <div> <button type="button"> Right </button> </div> <!--存在下拉菜单的按钮这样写--> <div> <button type="button" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </body> </html>
三、面板加表格，内嵌普通超链接文字