前端Wiki/CSS 框架/进阶/Bootstrap 常用组件

导航栏 Navbar

Navbar 是最复杂的现成组件，值得逐层拆解结构：navbar 根容器 → container-fluid 限宽 → navbar-brand 站点 Logo → navbar-toggler 汉堡按钮 → collapse navbar-collapse 可折叠区域（内放 navbar-nav 导航项和搜索表单）。

响应式折叠是核心机制：navbar-expand-lg 表示 lg 及以上展开成水平菜单，lg 以下收起为汉堡按钮，点击展开。data 属性驱动：data-bs-toggle="collapse" 声明行为类型，data-bs-target="#menu" 指向要折叠的目标 id——不需要写一行 JS。

配色两件套：背景用 bg-body-tertiary / bg-dark 等背景类，内容明暗用 navbar-light / navbar-dark（5.3 起推荐 data-bs-theme 方案）。记住 me-auto（margin-end: auto）这个小工具类，它把导航项推到左边、搜索框推到右边。

本节要点navbar-expand-lg 控制折叠断点；data-bs-toggle/target 纯 HTML 驱动交互；me-auto 把左右内容推向两端。

代码

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <!-- 站点 Logo -->
    <a class="navbar-brand" href="#">我的站点</a>

    <!-- 汉堡按钮：小屏才显示 -->
    <button class="navbar-toggler"
            data-bs-toggle="collapse" data-bs-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 折叠区域：lg 以上水平展开，lg 以下藏在汉堡里 -->
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav me-auto">   <!-- me-auto：推向左侧 -->
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">文档</a>
        </li>
      </ul>
      <form class="d-flex">             <!-- d-flex：推向右侧 -->
        <input class="form-control me-2" placeholder="搜索">
        <button class="btn btn-outline-success">搜索</button>
      </form>
    </div>
  </div>
</nav>

🔗 相关词条HTML 工具类 JS 组件

📚 推荐阅读

Element Plus v2.2 组件库教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读