跳到主要内容
在 GitHub 查看原文

导航栏

Bootstrap 强大且响应式的导航头部（navbar）的文档和示例。包括对品牌标识、导航等的支持，也包括对我们的折叠插件的支持。

本页目录

它是如何工作的

在开始使用导航栏之前，你需要了解以下内容：

  • 导航栏需要包裹 .navbar 与 .navbar-expand{-sm|-md|-lg|-xl|-xxl} 用于响应式折叠和 配色方案 类。
  • 导航栏及其内容默认是流动的。更改 容器 以不同的方式限制它们的水平宽度。
  • 使用我们的 间距 和 Flex 用于控制导航栏内间距和对齐的工具类。
  • 导航栏默认是响应式的，但你可以轻松修改它们来改变这一点。响应式行为取决于我们的 Collapse JavaScript 插件。
  • 通过使用确保可访问性 <nav> 元素，或者，如果使用更通用的元素例如一个 <div>，添加一个 role="navigation" 对每个导航栏明确标识它为辅助技术用户的地标区域。
  • 使用以下方法指示当前项目 aria-current="page" 针对当前页面或 aria-current="true" 对于集合中的当前项。
  • v5.2.0 新增内容： 导航栏可以使用限定于的 CSS 变量进行主题设置 .navbar 基类。 .navbar-light 已被弃用，并且 .navbar-dark 已经被重写以覆盖 CSS 变量，而不是添加额外的样式。

此组件的动画效果取决于 prefers-reduced-motion 媒体查询。请参阅我们的无障碍文档中的减少动画部分。

支持的内容

导航栏自带对一些子组件的内置支持。根据需要从以下选项中选择：

  • .navbar-brand 适用于你的公司、产品或项目名称。
  • .navbar-nav 用于全高且轻量的导航（包括支持下拉菜单）。
  • .navbar-toggler 用于与我们的折叠插件及其他 导航切换 功能一起使用。
  • 用于任何表单控件和操作的弹性和间距工具类。
  • .navbar-text 用于添加垂直居中的文本字符串。
  • .collapse.navbar-collapse 用于按父断点分组和隐藏导航栏内容。
  • 添加可选的 .navbar-nav-scroll 来设置 max-height 并 滚动展开的导航栏内容。

这是一个示例，展示了一个响应式浅色主题导航栏中包含的所有子组件，该导航栏会在 lg（大）断点处自动折叠。

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

此示例使用 背景 (bg-body-tertiary) 和 间距 (me-auto, mb-2, mb-lg-0, me-2) 工具类。

品牌

.navbar-brand 可以应用于大多数元素，但锚点效果最好，因为某些元素可能需要工具类或自定义样式。

文本

将你的文本放在具有 .navbar-brand 类的元素内。

作为一个链接作为标题
HTML
<!-- As a link -->
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>

图片

你可以将.navbar-brand内的文本替换为<img>。

HTML
<nav class="navbar bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

图片和文字

你还可以利用一些附加工具类来同时添加图像和文本。请注意添加的 .d-inline-block 和 .align-text-top 在……上 <img>.

HTML
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

导航栏（Navbar）导航链接在我们的.nav选项的基础上构建，拥有自己的修饰类，并需要使用切换器类（toggler classes）以实现正确的响应式样式。导航栏中的导航项也会扩展以占据尽可能多的水平空间，以确保你的导航栏内容安全对齐。

添加 .active 上课 .nav-link 表示当前页面。

请注意，你还应该添加 aria-current 活动中的属性 .nav-link.

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

因为我们为导航使用类，如果你愿意，可以完全避免基于列表的方法。

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

你也可以在导航栏中使用下拉菜单。下拉菜单需要一个用于定位的包装元素，因此请确保为.nav-item和.nav-link使用单独和嵌套的元素，如下所示。

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

表单

在导航栏中放置各种表单控件和组件：

HTML
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

.navbar的直接子元素使用 flex 布局，并且默认值为 justify-content: space-between。根据需要使用额外的flex 工具来调整此行为。

HTML
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

输入组也可行。如果你的导航栏是一个完整的表单，或主要是一个表单，你可以使用 <form> 元素作为容器，从而节省一些 HTML。

HTML
<nav class="navbar bg-body-tertiary">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
    </div>
  </form>
</nav>

这些导航栏表单也支持各种按钮。这也很好地提醒我们，垂直对齐工具可以用来对齐不同大小的元素。

HTML
<nav class="navbar bg-body-tertiary">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

文本

导航栏可以借助 .navbar-text 包含文本片段。此类会调整文本字符串的垂直对齐和水平间距。

HTML
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

根据需要与其他组件和工具进行混合搭配。

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

配色方案

v5.3.0 中的新深色导航栏 — 我们已废弃 .navbar-dark，改为使用新的 data-bs-theme="dark"。将 data-bs-theme="dark" 添加到 .navbar 上以启用组件特定的颜色模式。了解更多关于我们的颜色模式。

v5.2.0 新增 — 导航栏主题现在由 CSS 变量驱动，.navbar-light 已被废弃。CSS 变量应用于 .navbar，默认使用“light”外观，并可以通过 .navbar-dark 覆盖。

得益于 Bootstrap 对 Sass 和 CSS 变量的结合，导航栏主题比以往更容易使用。默认的是我们的“浅色导航栏”，适用于浅色背景，但你也可以将 data-bs-theme="dark" 应用于 .navbar 父元素，以适应深色背景。然后，使用 .bg-* 和其他工具类进行自定义。

<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar bg-primary" data-bs-theme="dark">
<!-- Navbar content -->
</nav>


<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
<!-- Navbar content -->
</nav>

容器

虽然这不是必须的，但你可以将导航栏包裹在 .container 中以在页面上居中——不过请注意，仍然需要一个内部容器。或者你可以在 .navbar 内添加一个容器，仅将 固定或静态顶部导航栏 的内容居中。

HTML
<div class="container">
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

使用任意响应式容器来改变导航栏中内容的呈现宽度。

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

职位安排

使用我们的定位工具将导航栏放置在非静态位置。可以选择固定在顶部、固定在底部、粘性固定在顶部（随着页面滚动直到到达顶部，然后保持在那里）或者粘性固定在底部（随着页面滚动直到到达底部，然后保持在那里）。

固定导航栏使用 position: fixed，意味着它们是从 DOM 的正常流中拉出的，并且可能需要自定义 CSS（例如，padding-top 在 <body> 上）以防止与其他元素重叠。

HTML
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
HTML
<nav class="navbar fixed-top bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
HTML
<nav class="navbar fixed-bottom bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
HTML
<nav class="navbar sticky-top bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
HTML
<nav class="navbar sticky-bottom bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

滚动

将 .navbar-nav-scroll 添加到 .navbar-nav（或其他导航栏子组件）中，以在折叠导航栏的可切换内容内启用垂直滚动。默认情况下，滚动在 75vh（或视口高度的 75%）时启动，但你可以使用本地 CSS 自定义属性 --bs-navbar-height 或自定义样式覆盖该行为。在较大视口中，当导航栏展开时，内容将显示为默认导航栏的样式。

请注意，这种行为可能带来一个overflow的缺点——当设置overflow-y: auto（需要在此滚动内容）时，overflow-x相当于auto，这将裁剪一些水平内容。

这是一个使用 .navbar-nav-scroll 和 style="--bs-scroll-height: 100px;" 的示例导航栏，并添加了一些额外的边距工具以实现最佳间距。

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

响应行为

导航栏可以使用 .navbar-toggler、.navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl|-xxl} 类来确定其内容何时会折叠到按钮后面。结合其他工具类，你可以轻松选择何时显示或隐藏特定元素。

对于永不折叠的导航栏，在导航栏上添加 .navbar-expand 类。对于始终折叠的导航栏，不要添加任何 .navbar-expand 类。

切换器

导航栏切换器默认左对齐，但如果它们跟随像 .navbar-brand 这样的同级元素，它们会自动对齐到最右侧。颠倒你的标记将会颠倒切换器的位置。下面是不同切换样式的示例。

在最小断点处未显示.navbar-brand：

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

左侧显示品牌名称，右侧显示切换按钮：

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

左侧有切换按钮，右侧有品牌名称：

HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

外部内容

有时你可能想使用折叠插件来触发一个容器元素，而其内容在结构上位于 .navbar 之外。由于我们的插件可以对 id 和 data-bs-target 进行匹配，因此这很容易实现！

HTML
<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
  <div class="bg-dark p-4">
    <h5 class="text-body-emphasis h4">Collapsed content</h5>
    <span class="text-body-secondary">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

当你这样做时，我们建议包括额外的 JavaScript，以便在容器打开时以编程方式将焦点移动到容器上。否则，键盘用户和辅助技术用户可能很难找到新显示的内容——尤其是如果打开的容器在文档结构中位于切换器的前面。我们还建议确保切换器具有aria-controls属性，指向内容容器的id。理论上，这允许辅助技术用户直接从切换器跳到其控制的容器——但目前对此的支持相当不稳定。

侧边栏

将你可展开和折叠的导航栏转换为使用 offcanvas 组件 的侧边抽屉。我们扩展了 offcanvas 的默认样式，并使用我们的 .navbar-expand-* 类来创建一个动态且灵活的导航侧边栏。

在下面的示例中，要创建一个在所有断点上始终折叠的画布外导航栏，请完全省略 .navbar-expand-* 类。

HTML
<nav class="navbar bg-body-tertiary fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex mt-3" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

要创建一个在特定断点（例如lg）扩展为普通导航栏的离画布导航栏，请使用.navbar-expand-lg。

<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

在深色导航栏中使用 offcanvas 时，请注意可能需要在 offcanvas 内容上使用深色背景，以避免文字变得难以辨认。在下面的示例中，我们将 .navbar-dark 和 .bg-dark 添加到 .navbar，将 .text-bg-dark 添加到 .offcanvas，将 .dropdown-menu-dark 添加到 .dropdown-menu，并将 .btn-close-white 添加到 .btn-close，以在深色 offcanvas 上进行正确的样式设置。

HTML
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex mt-3" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，导航栏现在在 .navbar 上使用本地 CSS 变量，以增强实时自定义功能。CSS 变量的值通过 Sass 设置，因此仍然支持 Sass 自定义。

scss/_导航栏.scss
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

在 .navbar-nav 上也存在一些额外的 CSS 变量：

scss/_导航栏.scss
--#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

通过 CSS 变量进行的自定义可以在 .navbar-dark 类上看到，我们在不添加重复 CSS 选择器的情况下覆盖特定值。

scss/_导航栏.scss
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass 变量

所有导航栏的变量：

scss/_variables.scss
$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;


$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base  $line-height-base + $nav-link-padding-y  2;
$navbar-brand-height:               $navbar-brand-font-size  $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height)  .5;
$navbar-brand-margin-end:           1rem;


$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;


$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .65);
$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8);
$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1);
$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3);
$navbar-light-icon-color:           rgba($body-color, .75);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

用于暗色导航栏的变量：

scss/_variables.scss
$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-icon-color:            $navbar-dark-color;
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass 循环

响应式导航栏展开/折叠类（例如，.navbar-expand-lg）与 $breakpoints 映射结合，并通过 scss/_navbar.scss 中的循环生成。

scss/_导航栏.scss
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

<span class="token comment">// stylelint-disable-next-line scss/selector-no-union-class-name</span>
<span class="token selector"><span class="token parent important">&amp;</span><span class="token variable">#{$infix}</span> </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">media-breakpoint-up</span><span class="token punctuation">(</span><span class="token variable">$next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>

    <span class="token selector">.navbar-nav </span><span class="token punctuation">{</span>
      <span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>

      <span class="token selector">.dropdown-menu </span><span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token selector">.nav-link </span><span class="token punctuation">{</span>
        <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>navbar-nav-link-padding-x<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>navbar-nav-link-padding-x<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.navbar-nav-scroll </span><span class="token punctuation">{</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.navbar-collapse </span><span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> flex <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token comment">// stylelint-disable-line declaration-no-important</span>
      <span class="token property">flex-basis</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.navbar-toggler </span><span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.offcanvas </span><span class="token punctuation">{</span>
      <span class="token comment">// stylelint-disable declaration-no-important</span>
      <span class="token property">position</span><span class="token punctuation">:</span> static<span class="token punctuation">;</span>
      <span class="token property">z-index</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
      <span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
      <span class="token property">width</span><span class="token punctuation">:</span> auto <span class="token important">!important</span><span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> auto <span class="token important">!important</span><span class="token punctuation">;</span>
      <span class="token property">visibility</span><span class="token punctuation">:</span> visible <span class="token important">!important</span><span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span>
      <span class="token property">transform</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>
      <span class="token keyword">@include</span> <span class="token function">box-shadow</span><span class="token punctuation">(</span>none<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">@include</span> <span class="token function">transition</span><span class="token punctuation">(</span>none<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// stylelint-enable declaration-no-important</span>

      <span class="token selector">.offcanvas-header </span><span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token selector">.offcanvas-body </span><span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
        <span class="token property">flex-grow</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">overflow-y</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

}
}