导航与标签页 Navs & tabs
Bootstrap 的导航组件共享通用标记与样式：在 .nav 基类上切换修饰符类，即可得到下划线标签页、胶囊、垂直导航等形态；配合 Tab 插件还能实现标签内容的真实切换。
基础标签页（下划线样式）
在 .nav 基类上添加 nav-tabs，即得到带下划线的标签页外观；当前项加 active，不可用项加 disabled。
HTML 示例
胶囊导航（Pills）
使用同样的 HTML，只需把 nav-tabs 换成 nav-pills：当前项变为实心胶囊块，常放在侧边栏、分组筛选等场景。
HTML 示例
垂直胶囊
添加 flex-column 工具类把导航改为纵向堆叠；也可以用响应式版本（如 flex-sm-column）实现小屏纵向、大屏横向。
HTML 示例
JS 切换标签内容
给标签按钮加 data-bs-toggle="tab"，即可切换下方 .tab-content 中的对应 .tab-pane；点击下面的标签试试真实切换。
这是「首页」标签关联的内容。点击其他标签即可切换可见内容——Tab 插件通过交换类名来控制内容的显示与样式，它可以和 nav-tabs、nav-pills 等任意 nav 导航搭配使用。
这是「个人资料」标签的内容区。每个面板都加了 fade 类获得淡入淡出效果，首个面板还需要 show 类保持初始可见。
这是「联系我们」标签的内容区。对应按钮带 role="tab"、aria-controls 等无障碍属性，屏幕阅读器可以正确播报标签状态。
这是「已禁用」标签关联的内容，按钮不可点击。
HTML 示例
对齐与填充
用 justify-content-center 让导航整体居中；用 nav-justified 让每个导航项等宽平分整行（另一个变体 nav-fill 则按内容比例填充）。
justify-content-center 居中对齐
nav-justified 等宽填充（每项平分整行宽度）
HTML 示例