Bootstrap 导航元素

Bootstrap 是一个流行的前端框架，它提供了很多预定义的样式和组件，让开发者可以快速地构建漂亮的网站。

其中，导航元素是一个常用的 UI 组件，它可以让用户方便地进行网站内部的导航。在 Bootstrap 中，有许多种导航元素可供选择，以下是其中一些常用的。

导航条

导航条是最常见的导航元素，它通常出现在网站的顶部。在 Bootstrap 中，可以使用 nav 和 navbar 类来定义导航条。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

上面的代码定义了一个导航条，其中包含了一个 Logo、一个可折叠的菜单按钮、若干个菜单项。菜单项使用 nav-item 类定义，链接使用 nav-link 类定义，可以自行修改样式或添加图标。

标签页

标签页是另一种常见的导航元素，它可以让用户在网站的不同页面之间进行切换。在 Bootstrap 中，可以使用 nav 和 nav-tabs 类来定义标签页。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

上面的代码定义了一个标签页，其中包含了三个标签，分别是 Home、Profile 和 Messages。可以使用 active 类来指定默认打开的标签。

面包屑

面包屑是一种导航元素，它可以告诉用户当前所在的页面位置，并且提供了返回上一级页面的链接。在 Bootstrap 中，可以使用 breadcrumb 类来定义面包屑。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

上面的代码定义了一个面包屑，其中包含了三个链接，分别是 Home、Library 和 Data。使用 breadcrumb-item 类定义链接，使用 active 类指定当前页面。可以使用 aria-label 属性来指定面包屑的名称。

分页

分页是一种导航元素，它可以让用户方便地进行分页浏览。在 Bootstrap 中，可以使用 pagination 类来定义分页。

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

上面的代码定义了一个分页，其中包含了上一页、第 1 页、第 2 页、第 3 页、下一页这几个链接。可以使用 page-item 类定义链接，使用 page-link 类指定链接内部的文本。可以根据实际情况使用 disabled 类禁用某些链接。

总结

以上是 Bootstrap 中常用的几种导航元素，它们可以应用在不同的场景中，提供了很多方便的功能。可以根据自己的需求选择合适的导航元素，并根据实际情况进行修改。