📌  相关文章
📜  导航栏如何在 Bootstrap 中工作？(1)

📅  最后修改于: 2023-12-03 15:09:30.639000             🧑  作者: Mango

导航栏如何在 Bootstrap 中工作？

Bootstrap 是一个广泛使用的前端框架，提供了一些常用的组件和工具，其中导航栏是一个非常常见的组件之一。

导航栏的基础使用

Bootstrap 的导航栏可以通过一个 <nav> 元素来创建，然后在里面加入 <ul> 和 <li> 元素来定义菜单项。例如：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">品优购</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="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">手机</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">电脑</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">敬请期待</a>
      </li>
    </ul>
  </div>
</nav>

上面的代码定义了一个基本的导航栏，其中：

  • navbar 类用于定义一个导航栏；
  • navbar-expand-lg 类用于定义在大屏幕（宽度大于 992px）下显示菜单项，否则显示一个汉堡菜单按钮；
  • navbar-light bg-light 类用于定义导航栏的背景色和文本颜色；
  • navbar-brand 类用于定义一个品牌，可以是文字或图片；
  • navbar-toggler 类用于定义一个汉堡菜单按钮；
  • collapse navbar-collapse 类用于定义一个折叠容器，用于包含菜单项；
  • navbar-nav 类用于定义一个菜单项容器；
  • nav-item 类用于定义一个菜单项；
  • nav-link 类用于定义一个菜单链接。
导航栏的高级用法

除了基础的使用外，Bootstrap 的导航栏还提供了许多高级用法。例如：

滚动监听

可以通过 data-spy="scroll" 属性开启导航栏的滚动监听功能，使导航栏能够自动高亮当前所在的页面部分。例如：

<body data-spy="scroll" data-target="#navbar-example2">
  <nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar-example2">
    <a class="navbar-brand" href="#">品优购</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav2">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#section1">第一部分</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">第二部分</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">第三部分</a>
        </li>
      </ul>
    </div>
  </nav>
  <div id="section1">第一部分</div>
  <div id="section2">第二部分</div>
  <div id="section3">第三部分</div>
</body>

上面的代码中，data-spy="scroll" 属性开启了滚动监听功能，data-target="#navbar-example2" 属性指定了监听的导航栏。菜单项的链接指向对应的页面部分（使用 ID 定位）。

下拉菜单

可以把菜单项下拉，以显示更多的选项。需要在菜单项中嵌套一个下拉菜单容器，并在链接中加入 data-toggle="dropdown" 和 aria-haspopup="true" 属性，以及 dropdown-menu 类来定义下拉菜单容器。例如：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">品优购</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          电脑
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">笔记本</a>
          <a class="dropdown-item" href="#">台式机</a>
          <a class="dropdown-item" href="#">一体机</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">手机</a>
      </li>
    </ul>
  </div>
</nav>

上面的代码中，第二个菜单项包含了一个下拉菜单。其中 nav-item dropdown 类定义了一个下拉菜单项，nav-link dropdown-toggle 类定义了打开下拉菜单的链接样式，dropdown-menu 类定义了下拉菜单容器。下拉菜单项的链接中指定了 data-toggle="dropdown" 和 aria-haspopup="true" 属性，用于打开下拉菜单。

导航栏堆叠

当屏幕变窄时，导航栏可能会堆叠。可以通过 navbar-expand-* 类来定义堆叠的方式，例如：

  • navbar-expand-md：在中等屏幕（宽度大于 768px）下显示菜单项，否则堆叠；
  • navbar-expand-sm：在小屏幕（宽度大于 576px）下显示菜单项，否则堆叠；
  • navbar-expand-xs：始终堆叠。
  • navbar-expand-lg：在大屏幕（宽度大于 992px）下显示菜单项，否则堆叠。

例如：

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">品优购</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="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">手机</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">电脑</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">敬请期待</a>
      </li>
    </ul>
  </div>
</nav>

上面的代码定义了一个在中等屏幕下显示菜单项，否则堆叠的导航栏。当屏幕宽度小于等于 768px 时，导航栏会堆叠，变成一个汉堡菜单按钮。

总结

Bootstrap 的导航栏是一个非常常用的组件，提供了基本使用和高级用法。其中基本使用包含了导航栏、品牌、菜单项、链接等组件，高级用法可以实现滚动监听、下拉菜单、导航栏堆叠等功能。掌握 Bootstrap 的导航栏使用，可以让网站更加美观、易用、高效。