导航 · Bootstrap 6.0 中文文档

基础导航

Bootstrap 中可用的导航共享通用标记和样式，从基础 .nav 类到活动和禁用状态。使用修饰符类可以在每种样式之间切换。

基础 .nav 组件是使用 flexbox 构建的，为构建各种类型的导航组件提供了坚实的基础。它包括一些样式覆盖（用于处理列表）、一些链接填充以增大点击区域，以及基本的禁用样式。

为了向辅助技术传达活动状态，请使用 aria-current 属性——对于当前页面使用 page 值，或对于集合中的当前项目使用 true。

HTML

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

类在整个过程中都被使用，因此你的标记可以非常灵活。像上面一样使用 <ul>，如果项目的顺序很重要则使用 <ol>，或者使用 <nav> 元素自定义。因为 .nav 使用了 display: flex，导航链接的行为与导航项相同，但无需额外标记。

HTML

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

在适当的情况下，你也可以为导航链接使用 <button> 元素而不是 <a> 元素。你甚至可以混合使用——例如，为菜单使用按钮。

HTML

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <button class="nav-link" data-bs-toggle="menu" href="#" role="button" aria-expanded="false">Menu</button>
  <div class="menu">
    <a class="menu-item" href="#">Action</a>
    <a class="menu-item" href="#">Another action</a>
    <hr class="menu-divider">
    <a class="menu-item" href="#">Something else here</a>
  </div>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

标签页 JavaScript 插件

使用标签页 JavaScript 插件创建可切换的区域。

可用样式

使用修饰符和工具类更改.nav组件的样式。根据需要混合搭配，或自己创建。

标签页

从上面的基本导航开始，并添加.nav-tabs类以生成标签界面。

活跃
链接
链接
已禁用

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

药丸

使用相同的 HTML，但改用 .nav-pills 来获得更具主题的外观。

活跃
链接
链接
已禁用

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

药丸导航也可以通过一个额外的修饰类 .nav-pills-vertical 实现垂直排列。

活跃
链接
链接
已禁用

HTML

<ul class="nav nav-pills nav-pills-vertical">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

下划线

使用同样的 HTML，但改用 .nav-underline：

活跃
链接
链接
已禁用

HTML

<ul class="nav nav-underline">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

对齐

使用 Flexbox 工具更改导航的对齐方式。默认情况下，导航是水平且左对齐的，但你可以轻松将它们修改为居中或右对齐，甚至垂直堆叠。

水平

居中于 .justify-content-center:

活跃
链接
链接
已禁用

HTML

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

右对齐，带 .justify-content-end：

活跃
链接
链接
已禁用

HTML

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

垂直

通过使用 .flex-column 工具更改 flex 项的方向来堆叠你的导航。需要在某些视口上堆叠它们而在其他视口上不堆叠吗？使用响应式版本（例如 .sm:flex-column）。

活跃
链接
链接
已禁用

HTML

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</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>

一如既往，无需即可进行垂直导航 <ul>也是。

HTML

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

填充并对齐

使用两种修饰类之一，强制你的.nav的内容占满全部可用宽度。要按比例填充所有可用空间的.nav-item，请使用.nav-fill。注意，虽然所有水平空间都被占用，但并非每个导航项目的宽度相同。

HTML

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</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>

在使用基于 <nav> 的导航时，你可以安全地省略 .nav-item，因为仅 .nav-link 就足以对 <a> 元素进行样式设置。

HTML

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

对于等宽元素，使用 .nav-justified。所有水平空间都将被导航链接占用，但与上面的 .nav-fill 不同，每个导航项的宽度将相同。

HTML

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</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>

类似于 .nav-fill 使用 a 的例子 <nav>基于…的导航。

HTML

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

使用弹性工具

如果你需要响应式导航变体，可以考虑使用一系列 flexbox 工具。虽然更冗长，但这些工具在响应式断点上提供了更大的自定义能力。在下面的示例中，我们的导航将在最低断点上堆叠，然后从小断点开始适应填充可用宽度的水平布局。

HTML

<nav class="nav nav-pills flex-column sm:flex-row">
  <a class="sm:flex-fill sm:text-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="sm:flex-fill sm:text-center nav-link" href="#">Longer nav link</a>
  <a class="sm:flex-fill sm:text-center nav-link" href="#">Link</a>
  <a class="sm:flex-fill sm:text-center nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

关于可访问性

如果你使用导航（navs）来提供导航栏，请确保将 role="navigation" 添加到 <ul> 的最合适的父容器，或者在整个导航周围包裹一个 <nav> 元素。不要将角色添加到 <ul> 本身，因为这会阻止辅助技术将其作为实际列表进行宣告。

请注意，即使导航栏在视觉上被样式化为带有 .nav-tabs 类的标签页，也不应赋予 role="tablist"、role="tab" 或 role="tabpanel" 属性。这些属性仅适用于动态标签页界面，如 ARIA 作者实践指南的标签页模式所述。有关动态标签页界面，请参见标签页插件。在动态标签页界面上不需要 aria-current 属性，因为我们的 JavaScript 会通过在活动标签页上添加 aria-selected="true" 来处理选中状态。

使用菜单

通过一些额外的 HTML 和菜单 JavaScript 插件添加菜单。

带菜单的标签页

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
    <div class="menu">
      <a class="menu-item" href="#">Action</a>
      <a class="menu-item" href="#">Another action</a>
      <a class="menu-item" href="#">Something else here</a>
      <hr class="menu-divider">
      <a class="menu-item" href="#">Separated link</a>
    </div>
  </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>

带菜单的标签

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
    <div class="menu">
      <a class="menu-item" href="#">Action</a>
      <a class="menu-item" href="#">Another action</a>
      <a class="menu-item" href="#">Something else here</a>
      <hr class="menu-divider">
      <a class="menu-item" href="#">Separated link</a>
    </div>
  </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>

CSS

变量

导航使用.nav上的本地CSS变量进行实时自定义。CSS变量的值是从每个组件独有的Sass映射生成的，并应用于上述类。

关于.nav基类：

scss/_nav.scss

// stylelint-disable-next-line scss/dollar-variable-default
$nav-tokens: defaults(
  (
    --nav-gap: .125rem,
    --nav-link-gap: .5rem,
    --nav-link-align: center,
    --nav-link-justify: center,
    --nav-link-padding-x: .75rem,
    --nav-link-padding-y: .375rem,
    --nav-link-color: var(--fg-2),
    --nav-link-hover-color: var(--fg-1),
    --nav-link-hover-bg: var(--bg-1),
    --nav-link-active-color: var(--fg-body),
    --nav-link-active-bg: var(--bg-2),
    --nav-link-disabled-color: var(--fg-4),
    --nav-link-border-width: var(--border-width),
    --nav-link-transition-property: "color, background-color, border-color",
    --nav-link-transition-duration: .15s,
    --nav-link-transition-timing: ease-in-out,
  ),
  $nav-tokens
);

关于.nav-tabs 修饰符类：

scss/_nav.scss

// stylelint-disable-next-line scss/dollar-variable-default
$nav-tabs-tokens: defaults(
  (
    --nav-tabs-border-width: var(--border-width),
    --nav-tabs-border-color: var(--border-color),
    --nav-tabs-border-radius: var(--radius-5),
    --nav-tabs-link-hover-border-color: var(--border-subtle),
    --nav-tabs-link-active-color: var(--fg-body),
    --nav-tabs-link-active-bg: var(--bg-body),
    --nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--bg-body),
  ),
  $nav-tabs-tokens
);

关于.nav-pills 修饰符类：

scss/_nav.scss

// stylelint-disable-next-line scss/dollar-variable-default
$nav-pills-tokens: defaults(
  (
    --nav-pills-bg: var(--bg-1),
    --nav-pills-padding: .25rem,
    --nav-pills-border-radius: 3rem,
    --nav-pills-link-active-color: var(--primary-contrast),
    --nav-pills-link-active-bg: var(--primary-bg),
    --nav-pills-link-border-radius: 3rem,
  ),
  $nav-pills-tokens
);

关于.nav-underline 修饰符类：

scss/_nav.scss

// stylelint-disable-next-line scss/dollar-variable-default
$nav-underline-tokens: defaults(
  (
    --nav-gap: 1rem,
    --nav-link-active-bg: transparent,
    --nav-underline-border-width: .125rem,
    --nav-underline-link-active-color: var(--fg-body),
  ),
  $nav-underline-tokens
);