在 Bootstrap 4 中，导航栏（Navbar）是一个非常重要的组件，用于创建网站的导航菜单。Bootstrap 提供了非常简便的方式来设计响应式、可定制的导航栏。以下是如何使用 Bootstrap 4 创建和定制不同类型的导航栏。

1. 基础导航栏

一个最基本的导航栏由品牌（logo）、导航链接和其他可选元素（如按钮、表单等）组成。

示例：

<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（大于 992px）时，导航栏会展开。否则，它会折叠成汉堡菜单。
  • navbar-light：设置导航栏的文本颜色为浅色，适合浅色背景。
  • bg-light：设置导航栏的背景色为浅色。
  • navbar-toggler：用于在小屏幕上折叠和展开导航栏的按钮。
  • navbar-nav：用于包含导航链接的容器。

2. 导航栏中的下拉菜单

导航栏中常常需要包含下拉菜单，Bootstrap 提供了 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>

解释：

  • nav-item dropdown：为列表项添加 dropdown 类以实现下拉菜单功能。
  • dropdown-toggle：为触发下拉菜单的链接添加该类。
  • dropdown-menu：包含下拉项的容器。
  • dropdown-item：下拉菜单中的单个项。

3. 固定顶部导航栏

你可以将导航栏固定在页面的顶部，确保它在页面滚动时始终可见。

示例：

<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>
      <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>

解释：

  • fixed-top：将导航栏固定在页面的顶部。请注意，固定的导航栏可能会覆盖页面内容，通常需要为页面的其他内容添加一些额外的上边距（margin-top）以避免内容被导航栏遮挡。

4. 响应式导航栏

Bootstrap 4 的导航栏可以根据屏幕大小动态地折叠或展开。我们通常会在大屏幕上展示完整的导航栏，在小屏幕上使用汉堡菜单。

示例：

<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</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-expand-lg：导航栏将在 lg 屏幕（大于 992px）及以上时展开，否则将折叠为汉堡菜单。

5. 导航栏与表单

你也可以将表单放入导航栏中，比如在导航栏中加入一个搜索框。

示例：

<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. 自定义导航栏

如果你希望自定义导航栏，可以调整其颜色、背景、字体等。你可以使用 navbar-dark 或 navbar-light 类来改变导航栏的文本颜色，使用 bg-* 类来设置背景颜色。

示例：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Custom 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>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
    </ul>
  </div>
</nav>

解释：

  • navbar-dark：适用于暗色背景的导航栏，文本会自动变成浅色。
  • bg-primary：设置导航栏的背景色为 Bootstrap 的主色（蓝色）。

总结

  • navbar 是构建导航栏的基本组件，提供了很多自定义选项。
  • navbar-expand-lg 控制导航栏的响应式行为，决定在不同屏幕大小下的显示方式。
  • navbar-toggler 让导航栏在小屏幕上折叠为汉堡菜单。
  • 下拉菜单（dropdown）：通过 dropdown 组件可以轻松添加下拉菜单。
  • 固定导航栏（fixed-top）：使导航栏始终固定在页面顶部。
  • 自定义样式：通过修改背景色、文本颜色等，可以让导航栏符合你的设计需求。

如果你有任何问题或需要进一步的帮助，随时可以提问！