Bootstrap5 导航(Navs & tabs)

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

基础导航

基本的.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>

在线运行

更新于 2021-12-24
在线,42分钟前登录

得運電子 6月前

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

得運電子 -> 半兽人 6月前

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

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