Bootstrap 标签页

标签页（Tabs）把内容按主题分成多个面板，点击顶部标签即可切换显示，避免单页过长。它有两种外观：nav-tabs 分隔式标签与 nav-pills 胶囊式按钮，常见于产品说明、系统设置、新闻分类等场景。

基础用法

菜单用 nav nav-tabs，每项通过 data-toggle="tab" 指向对应面板 id；面板统一放进 tab-content，每块是带 tab-pane 类的 div：

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
    <li><a data-toggle="tab" href="#news">新闻</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">首页内容</div>
    <div id="news" class="tab-pane fade">新闻内容</div>
</div>

显示效果：默认展示"首页"面板；点击"新闻"后内容切换且该项标签高亮。fade 负责淡入，in active 保证第一个面板一开始就可见。

胶囊式标签页

把 nav-tabs 换成 nav-pills 即为胶囊外观，其余结构不变：

<ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#a">选项A</a></li>
    <li><a data-toggle="pill" href="#b">选项B</a></li>
</ul>
<div class="tab-content">
    <div id="a" class="tab-pane fade in active">A 的内容</div>
    <div id="b" class="tab-pane fade">B 的内容</div>
</div>

显示效果：标签呈现圆角胶囊形；此时 data-toggle 写作 pill，点击行为与标签页一致。

竖排与更多外观

再加 nav-stacked 类胶囊即竖排，适合做侧边栏分区菜单：

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#profile">个人资料</a></li>
    <li><a href="#setting">系统设置</a></li>
</ul>

显示效果：两个胶囊纵向堆叠，选中项背景高亮，像一张纵向菜单；导航项里再嵌下拉菜单还可实现两级结构。

编程式 API 与事件

用 jQuery 也能切换面板；shown.bs.tab 事件常用于在内容显示后再初始化数据：

<script>
$('#myTabs a:last').tab('show'); // 激活最后一个标签
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // e.target 为当前标签，e.relatedTarget 为上一个标签
});
</script>

说明：show.bs.tab、shown.bs.tab、hide.bs.tab、hidden.bs.tab 四个事件覆盖切换的前后时机，方法统一为 tab('show')。

小结：标签页 = 导航菜单 + tab-content 面板两段结构，用 data-toggle 声明即可交互；需要程序控制时调用 tab('show')，需要联动时监听 shown.bs.tab 事件。