如何使用 Bootstrap 使用顶部导航和左侧导航栏

Bootstrap 是一个流行的前端框架，提供了许多易于使用的组件来快速实现美观的用户界面。其中包括顶部导航和左侧导航栏，本文将介绍如何使用 Bootstrap 实现这两个组件。

顶部导航

Bootstrap 的顶部导航组件包括一个 navbar 元素和一些 nav 元素。下面是一个基本的顶部导航代码片段：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand Name</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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

在这个代码片段中，navbar 元素的类设置为 navbar-expand-lg，这表示它只会在大屏幕上展开。navbar-light 是一个 Bootstrap 类，用于设置导航栏的背景色和文本颜色。bg-light 类表示背景色为浅灰色。

navbar-brand 元素是导航栏的标志，它通常是网站的名字或品牌标志。在这个例子中，navbar-toggler 按钮是用于在小屏幕上切换折叠菜单的按钮。navbar-collapse 元素包含要折叠的菜单项。navbar-nav 元素是用于包含菜单项的容器，每个菜单项都用 nav-item 类包装，在 nav-link 类中设置菜单项的链接地址，这个例子中链接地址只是一个占位符。

左侧导航栏

Bootstrap 的左侧导航栏组件包括一个 navbar 元素和一个 nav 元素。下面是一个基本的左侧导航栏代码片段：

<nav class="navbar navbar-dark bg-dark">
  <div class="navbar-nav">
    <a class="nav-item nav-link active" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Link</a>
    <a class="nav-item nav-link" href="#">Link</a>
  </div>
</nav>

在这个代码片段中，navbar 元素的类设置为 navbar-dark bg-dark，这表示导航栏背景色为黑色，文本颜色为白色。navbar-nav 元素是用于包含菜单项的容器，每个菜单项都是 a 元素，通过 nav-item 和 nav-link 类设置样式和链接地址，这个例子中链接地址只是一个占位符。

总结

Bootstrap 提供了易于使用的顶部导航和左侧导航栏组件，可以快速实现美观的用户界面。在本文中，我们介绍了如何使用 Bootstrap 实现这两个组件的基本代码片段。开发者可以根据自己的需求和场景，进一步定制这些组件的样式和功能。