在 Bootstrap 4 中，导航（Navigation）是一个常用的 UI 组件，用于实现网站的菜单和链接。Bootstrap 提供了许多类来帮助你创建响应式导航栏、垂直导航、分页导航等。下面是一些常见的导航使用示例。

1. 基本导航条

最基本的导航条可以使用 navbar 组件来实现。它包含了导航链接、品牌标识、按钮等内容。

示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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 <span class="sr-only">(current)</span></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>
  </div>
</nav>

解释：

  • navbar：基本的导航栏类。
  • navbar-expand-lg：当屏幕大于 lg 时，导航栏会展开；小于 lg 时，导航栏会折叠。
  • navbar-light：定义导航栏的背景色和文本颜色，适合浅色背景。
  • bg-light：设置导航栏的背景色为浅色。
  • navbar-toggler：用于在移动设备上切换折叠导航栏。
  • navbar-nav：导航栏的链接列表。

2. 垂直导航

Bootstrap 4 还支持创建垂直导航。通过添加 flex-column 类，可以将导航条转为垂直排列。

示例：

<div class="d-flex flex-column">
  <nav class="nav flex-column">
    <a class="nav-link active" href="#">Home</a>
    <a class="nav-link" href="#">Features</a>
    <a class="nav-link" href="#">Pricing</a>
  </nav>
</div>

解释：

  • d-flex flex-column：让父容器变为 Flexbox 布局，并使子元素（导航链接）按列方向排列。
  • nav flex-column：使导航栏成为垂直排列。

3. 响应式导航栏

在小屏幕设备上，通常使用汉堡按钮（navbar-toggler）来折叠和展开导航栏。Bootstrap 4 的 navbar 组件可以自动根据屏幕大小响应式调整显示。

示例：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</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 <span class="sr-only">(current)</span></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>
  </div>
</nav>

解释：

  • navbar-dark：设置导航栏的文本颜色为浅色，适合深色背景。
  • bg-dark：设置导航栏的背景色为深色。
  • navbar-toggler：在小屏幕设备上提供折叠按钮。

4. 导航栏链接和下拉菜单

导航栏中的链接可以与下拉菜单结合使用，形成复杂的导航结构。使用 dropdown 组件可以实现。

示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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="#">Features</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

解释：

  • dropdown：创建下拉菜单。
  • dropdown-toggle：触发下拉菜单的链接。
  • dropdown-menu：下拉菜单的内容。

5. 导航栏与表单

导航栏还可以包含表单，例如一个搜索框。你可以将表单元素放在 navbar-nav 中。

示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

解释：

  • form-inline：将表单元素放在同一行。
  • my-2 my-lg-0：用于调整表单的外边距，使其适应不同屏幕大小。

6. 固定顶部导航

你可以通过 fixed-top 类将导航栏固定在页面顶部，无论用户如何滚动页面，导航栏都会保持在顶部。

示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
    </ul>
  </div>
</nav>

解释：

  • fixed-top：将导航栏固定在页面顶部。

总结

  • 基本导航：使用 navbar 类来创建基本的导航栏。
  • 垂直导航：使用 flex-column 类将导航链接排列为垂直布局。
  • 响应式导航栏：通过 navbar-toggler 和 navbar-collapse 实现导航栏的折叠和展开。
  • 下拉菜单：结合 dropdown 组件创建包含下拉菜单的导航栏。
  • 表单与搜索框：在导航栏中加入表单元素。
  • 固定顶部导航：通过 fixed-top 类实现固定顶部导航。

Bootstrap 4 提供了强大的导航组件，能够满足大部分网站导航需求。如果你有更多问题或需要更多帮助，随时提问！