Bootstrap 导航元素

导航元素提供两种基础样式：标签页（nav-tabs）与胶囊（nav-pills），二者都基于公共类 nav。它们既能做静态导航链接，也能配合 JS 实现"点标签切换内容面板"。

公共基础 nav

所有导航都以 class="nav" 开头，再叠加 nav-tabs 或 nav-pills；结构统一为 ul > li > a。

<ul class="nav nav-tabs">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">关于</a></li>
</ul>
<!-- 效果：横向一排标签，当前项"首页"下方带有蓝色高亮条 -->

标签页切换内容

给 li 中的 a 加 data-toggle="tab" 指向面板 id，再写对应 id 的 tab-pane 面板（外层包 tab-content），点击即可切换内容区。

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
  <li><a href="#news" data-toggle="tab">新闻</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">这是首页内容。</div>
  <div class="tab-pane" id="news">这是新闻内容。</div>
</div>
<!-- 效果：点击"新闻"标签，下方内容区随之切换（需引入 bootstrap.min.js） -->

胶囊式导航 nav-pills

nav-pills 用圆角药丸状高亮替代下划线；叠加 nav-stacked 可纵向堆叠成侧边菜单。

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">个人中心</a></li>
  <li><a href="#">订单管理</a></li>
  <li><a href="#">地址管理</a></li>
</ul>
<!-- 效果：三个圆角高亮项纵向排列，构成左侧菜单 -->

两端对齐 nav-justified

nav-justified 让各导航项平分父容器宽度，标签页与胶囊都适用，常用于顶部通栏导航。

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>
<!-- 效果：四个标签平均铺满整行，每项宽度一致 -->

禁用与下拉

disabled 让选项灰显不可点；导航项内部还可嵌套下拉菜单，用法与普通下拉菜单章节相同。

<ul class="nav nav-tabs">
  <li class="active"><a href="#">首页</a></li>
  <li class="disabled"><a href="#">即将上线</a></li>
</ul>
<!-- 效果：第二个标签灰色显示且点击无反应 -->

小结

导航元素先选标签页或胶囊样式，再决定是否叠加堆叠、两端对齐；要做内容联动切换时，给 a 加 data-toggle="tab" 并配好 tab-pane 面板即可。