如何在 Bootstrap 中创建导航栏

bootstrapweb developmentfront end technology

概述

导航栏是任何 Web 应用程序中的常见组件。导航栏还可以充当页眉，其中包含代表网站的组织或品牌的徽标。它还包含网站的导航部分，我们可以通过它直接浏览网站的各个部分。使用 Bootstrap 创建导航栏可以通过将一些预定义的导航栏类集成到 nav 元素中来实现，这将略微帮助我们构建导航栏。

有一些预定义的 Bootstrap 类必须并且将为我们的导航栏提供形状。这些类是 −

navbar
navbar-brand
nav-item
nav-link
navbar-collapse
collapse

内容分发网络 (CDN) 链接

添加此 CDN 链接以使用引导程序的类和组件。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.mi n.css" rel="stylesheet" 完整性="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHt vPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bund le.min.js" 完整性="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+Brx E/N" crossorigin="anonymous"></script>

算法

步骤 1 - 在文本编辑器中创建 HTML 样板代码。

步骤 2 - 将 Bootstrap CDN 链接添加到代码的 head 标签中。

步骤 3 - 现在要创建导航栏，请创建一个父导航元素，其类名为 navbar、navbar-expand。我们将创建一个用于暗黑模式的导航栏，因此我们将向父导航元素添加一个属性 data-bs-theme，其值为 dark。

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark"></nav>

步骤 4- 在导航栏中创建三个部分，分别为徽标、搜索栏和注册按钮。

步骤 5 - 创建第一个部分，将类名定义为 navbar-brand，并在其中插入图像标签。

<div>
   <a class="navbar-brand" href="#">
      <img src="#" alt="Bootstrap" width="150">
   </a>
</div>

步骤 6 - 为搜索栏和课程下拉框创建第二部分。

<div class="collapse navbar-collapse" id="navbarSupportedContent">
   <input class="form-control rounded-end-0 border-end-0 " type="search" placeholder="Search articles here..." aria-label="Search">
   <div class="dropdown me-3">
      <button class="btn btn-secondary dropdown-toggle rounded-start-0" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Courses </button>
      <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Artificial Intelligence</a></li>
         <li><a class="dropdown-item" href="#">Machine Learning</a></li>
         <li><a class="dropdown-item" href="#">Crypto Currency</a></li>
         <li><a class="dropdown-item" href="#">Metaverse</a></li>
      </ul>
   </div>
</div>

步骤 7− 创建第三个部分，用于注册按钮。

<button class="btn btn-success" type="submit">SignUp</button>

步骤 8 − 导航栏已成功创建，可在浏览器中查看。

示例

在此示例中，我们将使用 Bootstrap 构建一个导航栏。在导航栏中，我们将创建徽标部分、一个搜索栏(用户可以在其中搜索最新或过去发布的文章)、一个用于显示课程数量的下拉框以及一个注册按钮。

<html>
<head>
   <title>Bootstrap Navbar</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</head>
<body>
   <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
      <div class="container-fluid d-flex align-items-center justify-content-between">
         <div>
            <a class="navbar-brand" href="#">
               <img src="https://www.tutorialspoint.com/images/logo-w.png" alt="Bootstrap" width="150">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <input class="form-control rounded-end-0 border-end-0 " type="search" placeholder="Search articles here..." aria-label="Search">
            <div class="dropdown me-3">
               <button class="btn btn-secondary dropdown-toggle rounded-start-0" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Courses </button>
               <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Artificial Intelligence</a></li>
                  <li><a class="dropdown-item" href="#">Machine Learning</a></li>
                  <li><a class="dropdown-item" href="#">Crypto Currency</a></li>
                  <li><a class="dropdown-item" href="#">Metaverse</a></li>
               </ul>
            </div>
         </div>
         <button class="btn btn-success" type="submit">SignUp</button>
      </div>
   </nav>
</body>
</html>

下图展示了一个使用 navbar 构建的导航栏，它具有在网页上搜索文章的功能，并在课程下拉菜单中包含一些导航链接，当用户点击时，导航链接会将我们重定向到课程的特定页面，并具有注册和登录功能。

算法

步骤 1 - 在文本编辑器中创建一个 HTML 样板文件。

步骤 2 - 将 Bootstrap CDN 链接添加到代码的 head 标签中。

步骤 3 - 创建一个父容器，类名为 navbar 和 navbar-expand。

<nav class="navbar navbar-expand-lg bg-body-tertiary"></nav>

步骤 4 − 现在在其中插入一个带有徽标名称的子 div，并将类名定义为 navbar-brand。在图片的 src 属性中插入徽标链接，并设置图片的宽度。

<a class="navbar-brand" href="#">
<img src="" alt="Bootstrap">
</a>

步骤 5 − 要为响应式菜单创建 Bootstrap 汉堡图标，请参考此代码和属性，它们将帮助您制作汉堡图标菜单。

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

步骤 6 − 创建将在导航栏上显示的菜单，并使用类 collapse 和 navbar-collapse 使此菜单在移动模式下显示为火腿图标。

<div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
   <form class="d-flex" role="search">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
            <a class="nav-link active fw-semibold" aria-current="page" href="#">Home</a>
         </li>
         <li class="nav-item">
            <a class="nav-link fw-semibold" href="#">About</a>
         </li>
         <li class="nav-item">
            <a class="nav-link fw-semibold" href="#">Services</a>
         </li>
      </ul>
      <button class="btn btn-success" type="submit">SignUp</button>
   </form>
</div>

示例

在此示例中，我们创建了一个简单的基础导航栏，适用于所有类型的 Web 应用程序。我们创建了一个包含四个部分的导航栏，因为它是一个完全响应式的导航栏，在移动模式下显示汉堡图标。它还包含一些导航链接，例如主页、关于、服务以及注册按钮。

<html>
<head>
   <title>Bootstrap Navbar</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</head>
<body>
   <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
         <a class="navbar-brand" href="#">
            <img src="https://www.tutorialspoint.com/images/logo.png" alt="Bootstrap" width="150">
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
            <form class="d-flex" role="search">
               <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                     <a class="nav-link active fw-semibold" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link fw-semibold" href="#">About</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link fw-semibold" href="#">Services</a>
                  </li>
               </ul>
               <button class="btn btn-success" type="submit">SignUp</button>
            </form>
         </div>
      </div>
   </nav>
</body>
</html>

下图展示了使用 Bootstrap 创建的导航栏的基本视图，其中包含品牌徽标、菜单图标和注册按钮。当用户点击任何菜单图标选项时，它会将用户重定向到该特定页面。

结论

在旧版本中，如果我们想要将导航栏设置为暗色或亮色模式，则必须分别使用 navbar-dark 或 navbar-light 类，但现在这些类不再用作类，因此，为了设置暗色或亮色导航栏，可以使用属性 data-bs-theme 并将其值设置为暗色;对于亮色导航栏，则使用默认值。为了使导航栏具有响应式功能，只有一个类 navbar-expand，这使得我们的导航栏可以在任何屏幕上显示。