数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 Bootstrap 中创建导航栏
概述
导航栏是任何 Web 应用程序中常见的组件。导航栏也可以充当页眉，其中包含组织的徽标或代表网站的品牌。它还包含网站的导航部分，通过它我们可以直接导航到网站的某个部分。使用 Bootstrap 创建导航栏可以通过将一些预定义的导航栏类集成到 nav 元素中来实现，这将稍微帮助我们构建导航栏。
有一些预定义的 Bootstrap 类必须并且将为我们的导航栏提供形状。这些类是 -
navbar
navbar-brand
nav-item
nav-link
navbar-collapse
collapse
内容分发网络 (CDN) 链接
添加此 CDN 链接以使用 Bootstrap 的类和组件。
<link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.mi n.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHt vPp" crossorigin="anonymous"> <script src=“https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bund le.min.js” integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+Brx E/N" crossorigin="anonymous"></script>
算法
步骤 1 - 在您的文本编辑器上创建一个 HTML 基本结构。
步骤 2 - 将 Bootstrap CDN 链接添加到代码的 head 标签中。
步骤 3 - 现在要创建导航栏，创建一个父 nav 元素，其类名为 navbar、navbar-expand。我们正在为暗模式创建导航栏，因此我们将向父 nav 元素添加一个属性 data-bs-theme，其值为 dark。
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark"></nav>
步骤 4 - 在导航栏中创建三个部分，用于徽标、搜索栏和注册按钮。
步骤 5 - 创建第一个部分并定义类名为 navbar-brand，并在其中插入 image 标签。
<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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://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>
下面给出的图像显示了一个使用导航栏构建的导航栏，该导航栏具有在网页上搜索文章的功能，并在课程的下拉菜单中包含一些导航链接，这些链接将用户重定向到用户点击的特定课程页面，并具有注册和登录功能。
算法
步骤 1 - 在您的文本编辑器上创建一个 HTML 基本结构。
步骤 2 - 将 Bootstrap CDN 链接添加到代码的 head 标签中。
步骤 3 - 创建一个父容器，其类名为 navbar 和 navbar-expand。
<nav class="navbar navbar-expand-lg bg-body-tertiary"></nav>
步骤 4 - 现在在其内插入子 div，并使用徽标名称定义类名为 navbar-brand。在 image 标签的 src 属性中插入徽标链接并设置 image 的宽度。
<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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://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 并将其值设置为 dark，对于亮导航栏，它是默认值。为了使导航栏具有响应性，只有一个类，即 navbar-expand，它使我们的导航栏可以在任何屏幕上查看。
981 次浏览
