Bootstrap5 导航（Navs & tabs）

原创
半兽人 发表于: 2020-07-08   最后更新时间: 2021-12-24 23:59:01  
{{totalSubscript}} 订阅， 4,548 游览

基础导航

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在线运行

使用非常灵活。 像上面一样使用<ul>，如果项目的顺序很重要，则使用<ol>，或者使用<nav>元素滚动自己。 .nav使用display: flex，因此导航链接的行为与导航项相同，但没有额外的标记。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

在线运行

可用的样式

使用修饰符和实用程序更改 .navs 组件的样式。 根据需要混合搭配，或构建自己的。

水平对齐

用flexbox工具改变你的nav的水平排列。默认情况下，navs是左对齐的，但你可以轻松地将其改为居中或右对齐。

以 .justify-content-center 为中心：

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在线运行

也可以使用 .justify-content-end 来右对齐:

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在线运行

垂直

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在线运行

一如既往，没有<ul>也可以进行垂直导航。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

在线运行

标签

根据基础nav，添加.nav-tabs类来生成一个标签式的界面。使用它们可以用我们的tab JavaScript插件创建tabbable区域。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在线运行

Pills

采取同样的HTML，但使用.nav-pills代替。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在线运行

填充和证明

强制你的.nav的内容扩展到整个可用的宽度，这是两个修改器类之一。使用.nav-items按比例填充所有可用空间，使用.nav-fill。注意，所有的水平空间都被占用，但不是每个nav项都有相同的宽度。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在线运行

当使用基于<nav>的导航时，你可以安全地省略.nav-item，因为只有.nav-link是为<a>元素定型所需的。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

在线运行

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

在线运行

使用 flex 实用程序

如果你需要响应式的nav，可以考虑使用flexbox实用工具。这些工具虽然比较冗长，但却提供了更大的跨响应断点的自定义功能。在下面的例子中，我们的nav将被堆叠在最低的断点上，然后适应水平布局，从小断点开始填充可用宽度。

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

在线运行

关于无障碍

如果你使用 navs 来提供导航栏，一定要在 <ul> 最合乎逻辑的父容器中添加一个 role="navigation"，或者在整个容器中包裹一个 <nav> 元素 导航。 不要将角色添加到 <ul> 本身，因为这会阻止辅助技术将其宣布为实际列表。

注意，导航条，即使在视觉上以.nav-tabs类作为标签样式，也不应该被赋予role="tablist"、role="tab"或role="tabpanel"属性。这些只适合于动态标签界面，如WAI ARIA创作实践中所述。请参阅本节中的动态标签界面的JavaScript行为，以获得一个例子。aria-current属性在动态标签界面上是不必要的，因为我们的JavaScript通过在活动标签上添加aria-selected="true"来处理选择状态。

使用下拉菜单

用一点额外的HTML和dropdowns JavaScript插件添加下拉菜单。

带下拉菜单的标签

<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 dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" 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><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在线运行

带下拉菜单的Pills

<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 dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" 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><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

在线运行

bootstrap5
更新于 2021-12-24
半兽人

得運電子 1年前

请教大师，这个标签导航也可以像导航条一样固定在距屏幕顶端的某个位置吗？如果可以，应该怎样写?

0 0 回复
半兽人 -> 得運電子 1年前

可以，参考 Bootstrap5 位置（Position）

0 0 回复
得運電子 -> 半兽人 1年前

因为已经使用过一次把导航粘贴顶端了，现在是想把另一导航标签粘贴在左侧或右侧，如何办到呢？

0 0 回复
查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题，也可以与我们一起分享文章。