Bootstrap 导航类型

问题

Bootstrap 中的导航都有哪些？

解答

Bootstrap 提供了多种导航组件，适用于不同的场景。

1. 基础导航

<!-- 基础水平导航 -->
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">禁用</a>
  </li>
</ul>

2. 标签页导航（Tabs）

<!-- 标签页样式导航 -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#profile">个人</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#contact">联系</a>
  </li>
</ul>

<!-- 标签页内容 -->
<div class="tab-content">
  <div class="tab-pane fade show active" id="home">首页内容</div>
  <div class="tab-pane fade" id="profile">个人内容</div>
  <div class="tab-pane fade" id="contact">联系内容</div>
</div>

3. 胶囊导航（Pills）

<!-- 胶囊样式导航 -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">激活</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">链接</a>
  </li>
</ul>

4. 垂直导航

<!-- 垂直排列的胶囊导航 -->
<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">服务</a>
  </li>
</ul>

5. 导航栏（Navbar）

<!-- 响应式导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    
    <!-- 移动端折叠按钮 -->
    <button class="navbar-toggler" type="button" 
            data-bs-toggle="y1w9u" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- 导航内容 -->
    <div class="y1w9u navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">功能</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" 
             data-bs-toggle="dropdown">下拉菜单</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">选项1</a></li>
            <li><a class="dropdown-item" href="#">选项2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

6. 面包屑导航（Breadcrumb）

<!-- 面包屑导航，显示页面层级 -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item"><a href="#">分类</a></li>
    <li class="breadcrumb-item active" aria-current="page">当前页</li>
  </ol>
</nav>

7. 分页导航（Pagination）

<!-- 分页导航 -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">上一页</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">下一页</a>
    </li>
  </ul>
</nav>

关键点

• nav-tabs：标签页样式，适合内容切换场景
• nav-pills：胶囊样式，视觉上更突出
• navbar：完整的响应式导航栏，支持折叠和下拉菜单
• breadcrumb：面包屑导航，展示页面层级路径
• pagination：分页导航，用于列表分页
• 添加 flex-column 可将水平导航转为垂直导航