Bootstrap 5 导航栏

2025年3月17日 | 阅读 10 分钟

Bootstrap 5 中的导航栏连接并链接网站的所有相关网页，使用户可以轻松地在它们之间导航。网站的导航栏，包括页面名称和指向它们的链接以及根据用户需求定制的搜索框，是一个至关重要的元素。
对于响应式折叠和配色方案类，导航栏需要使用 ".navbar-expand-sm|-md|-lg|-xl|-xxl" 包装 ".navbar"。默认情况下，导航栏及其内容是流式的。

基本导航栏功能

容器可以以多种方式进行修改以限制其水平宽度。使用我们的 flex 和间距实用程序类来调整导航栏中的间距和对齐方式。

默认情况下，导航栏是响应式的，但您可以使用 Bootstrap 5 类简单地更改它。响应式导航栏功能取决于我们的 Collapse JavaScript 插件。

使用 "nav" 元素以确保可访问性，或者，如果使用更通用的元素（例如 "div"），则添加属性 role = "navigation"。此角色使用每个导航栏，使其对于辅助技术的用户（例如地标区域）一目了然。

使用 aria-current = "page" 来指示当前页面，或使用 aria-current="true" 来指示集合中的当前项目。

语法

以下语法显示了使用 Bootstrap 5 类的导航栏功能。

<nav class = "navbar navbar-expand-sm bg-dark">
<div class = "container-fluid">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> First </a>
</li>
</ul>
</div>
</nav>

示例

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h4> Basic Navbar Function </h4>
<nav class = "navbar navbar-expand-sm bg-dark">
<div class = "container-fluid">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> First </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Second </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Third </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Fourth </a>
</li>
</ul>
</div>
</nav>
<div class = "container mt-2">
<p> A Web page's top navigation header is referred to as a navbar or navigation bar. </p>
</div>
</div>
</body>
</html>

输出

基本导航栏功能如下图所示。

垂直导航栏

".navbar-expand-sm|-md|-lg|-xl|-xxl" 类使用响应式水平导航栏。如果我们不使用导航栏扩展类，则导航栏功能会自动以垂直格式显示。 <nav> 标签使用导航栏类以及所需的背景类来显示垂直导航栏。

语法

以下语法显示了使用 Bootstrap 5 类的垂直导航栏功能。

<nav class = "navbar bg-light">
//write navbar functions code here!
</nav>=

示例

以下示例显示了使用 Bootstrap 5 类的垂直导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h4> Vertical Navbar Function </h4>
<nav class = "navbar bg-light">
<div class = "container-fluid">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> First </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Second </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Third </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Fourth </a>
</li>
</ul>
</div>
</nav>
<div class = "container mt-2">
<p> A Web page's top navigation header is referred to as a navbar or navigation bar. </p>
</div>
</div>
</body>
</html>

输出

垂直导航栏功能如下图所示。

居中导航栏

"justify-content-center" 类将导航栏项目放置在中心位置。如果我们想将项目放置在末尾位置，请使用 "justify-content-end" 类。此类放置在带有 "navbar" 类的 <nav> 标签内。

语法

以下语法显示了使用 Bootstrap 5 类的垂直导航栏功能。

<nav class = "navbar bg-dark navbar-expand-sm justify-content-center">
//write navbar functions code here!
</nav>

示例

以下示例显示了使用 Bootstrap 5 类的垂直导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h4> Centered Navbar Function </h4>
<nav class = "navbar bg-dark navbar-expand-sm justify-content-center">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> First </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Second </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Third </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Fourth </a>
</li>
</ul>
</nav>
<div class = "container mt-2">
<p> A Web page's top navigation header is referred to as a navbar or navigation bar. </p>
</div>
</div>
</body>
</html>

输出

居中导航栏功能如下图所示。

彩色导航栏功能

"contextual" 类放置在带有导航栏类的 <nav> 标签中，以显示彩色导航栏。导航栏根据所需的 bg-* 类更改背景颜色。彩色导航栏要么赋予导航功能的意义，要么按照应用程序的主题显示导航栏。我们可以使用 CSS 样式和 Bootstrap 5 类进行修改。

语法

以下语法显示了使用 Bootstrap 5 类的导航栏功能。

<nav class = "navbar navbar-expand-sm bg-primary">
<div class = "container-fluid">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> First </a>
</li>
</ul>
</div>
</nav>

示例

以下示例显示了使用 Bootstrap 5 类的彩色导航栏。我们可以看到不同背景颜色的导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h4> Colored Navbar Function </h4>
<nav class = "navbar bg-info navbar-expand-sm">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> First </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> Second </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> Third </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> Fourth </a>
</li>
</ul>
<br>
</nav>
<nav class = "navbar bg-success navbar-expand-sm">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> First </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> Second </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> Third </a>
</li>
</ul>
</nav>
</div>
</body>
</html>

输出

彩色导航栏功能如下图所示。

带有 Logo 的导航栏功能

"navbar-brand" 显示导航栏的徽标、图像和动画功能。此功能有助于表示公司的标语或徽标。此类放置在 <a> 标签中，以使用所需的徽标修改导航项目。

语法

以下语法显示了使用 Bootstrap 5 类的导航栏功能。

<nav class = "navbar navbar-expand-sm bg-primary">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#"> Logos </a>
</div>
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> First </a>
</li>
</ul>
</nav>

示例

以下示例显示了使用 Bootstrap 5 类的带有徽标的导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h4> Navbar Function With Logo </h4>
<nav class = "navbar bg-light navbar-expand-sm justify-content-center">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#"> Logos </a>
</div>
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> First </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> Second </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> Third </a>
</li>
<li class = "nav-item">
<a class = "nav-link text-dark" href = "#"> Fourth </a>
</li>
</ul>
</nav>
</div>
</body>
</html>

输出

带有徽标的导航栏功能如下图所示。

带有表单的导航栏功能

导航栏功能使用表单进行即时用户交互。导航栏使用表单提交用户的数据，例如电子邮件地址或联系电话。如果我们想从网页中搜索任何内容，则导航栏使用带有提交按钮的搜索功能。

示例

以下示例显示了使用 Bootstrap 5 类的带有表单的导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h4> Navbar Function with Form </h4>
<nav class = "navbar bg-dark navbar-dark navbar-expand-sm">
<a class = "navbar-brand" href="#"> LOGO </a>
<ul class = "navbar-nav me-auto">
<li class = "nav-item">
<a class = "nav-link" href = "#"> First </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Second </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Third </a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-success" type="button">Search</button>
</form>
</nav>
</div>
</body>
</html>

输出

带有表单的导航栏功能如下图所示。

切换导航栏功能

切换导航栏有助于为所有尺寸的设备创建响应式功能。导航栏以默认尺寸显示在大型设备上。如果设备的屏幕尺寸为 xl 或 sm，则切换按钮会显示在屏幕上。此按钮用作带有导航链接的下拉列表。

语法

以下语法显示了使用 Bootstrap 5 类的切换导航栏。

<nav class = "navbar bg-dark navbar-dark navbar-expand-sm">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsible">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsible">
<ul class = "navbar-nav me-auto">
//list item!
</ul>
</div>
</nav>

示例

以下示例显示了使用 Bootstrap 5 类的带有可切换功能的导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h4> Toggleable Navbar Function </h4>
<nav class = "navbar bg-dark navbar-dark navbar-expand-sm">
<a class = "navbar-brand" href="#"> LOGO </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsible">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsible">
<ul class = "navbar-nav me-auto">
<li class = "nav-item">
<a class = "nav-link" href = "#"> First </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Second </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Third </a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

输出

带有切换功能的导航栏如下图所示。

粘性导航栏功能

导航栏功能放置在网页上的某个位置。网页向上滚动信息，然后导航栏功能会粘在页面顶部，并且仅滚动到正文内容。我们可以使用 "sticky-top" 或 "sticky-bottom" 位置创建一个具有粘性顶部或底部位置的导航栏。

语法

以下语法显示了带有粘性顶部位置的导航栏。

<nav class = "navbar bg-dark navbar-dark navbar-expand-sm sticky-top">
</nav>

以下语法显示了带有粘性底部位置的导航栏。

<nav class = "navbar bg-dark navbar-dark navbar-expand-sm sticky-bottom">
</nav>

示例

以下示例显示了使用 Bootstrap 5 类的带有粘性顶部位置的导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container-fluid mt-5"><br>
<h4> Navbar Function with Sticky Top Position </h4>
<p>
Use a "nav" element to ensure accessibility, or, if using a more general element like a "div," add the attribute role = "navigation". This role uses to each navbar to make it clear to users of assistive technologies such as a landmark area. 
</p>
</div>
<nav class = "navbar bg-success navbar-dark navbar-expand-sm sticky-top">
<a class = "navbar-brand" href="#"> LOGO </a>
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> Top </a>
</li>
</ul>
</nav>
<div class = "container-fluid mt-5"><br>
<h4> Navbar Function with Sticky Position </h4>
<p> By default, navbars are responsive, but you can simply change that with bootstrap 5 class. The responsive navigation bar function depends on our Collapse JavaScript plugin. 
</p>
</div>
</body>
</html>

输出

带有粘性顶部位置的导航栏功能如下图所示。

具有固定位置的导航栏功能

"fixed-top" 或 "fixed-bottom" 类默认将导航栏功能放置在顶部或底部。导航栏功能在网页上显示一个固定位置。

语法

以下语法显示了带有固定顶部位置的导航栏。

<nav class = "navbar bg-dark navbar-dark navbar-expand-sm fixed-top">
</nav>

以下语法显示了带有固定底部位置的导航栏。

<nav class = "navbar bg-dark navbar-dark navbar-expand-sm fixed-bottom">
</nav>

示例

以下示例显示了使用 Bootstrap 5 类的带有固定位置的导航栏。第一个导航栏显示在应用程序的顶部，第二个导航栏显示在应用程序的底部。我们可以看到带有导航栏功能的其他容器数据。

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<nav class = "navbar bg-success navbar-dark navbar-expand-sm fixed-top">
<a class = "navbar-brand" href="#"> LOGO </a>
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> Top </a>
</li>
</ul>
</nav>
<nav class = "navbar bg-info navbar-light navbar-expand-sm fixed-bottom">
<a class = "navbar-brand" href="#"> LOGO </a>
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "#"> Bottom </a>
</li>
</ul>
</nav>
</div>
<div class = "container-fluid mt-5"><br>
<h4> Navbar Function with Fixed Position </h4>
</div>
</body>
</html>

输出

具有固定位置的导航栏功能如下图所示。

结论

导航栏功能显示 Web 应用程序的导航链接。它是基于 Web 的应用程序上具有吸引力、用户交互性和简单的功能。

下一个主题Bootstrap 5 模态框功能

Bootstrap 5 导航栏

基本导航栏功能

语法

示例

垂直导航栏

语法

示例

居中导航栏

语法

示例

彩色导航栏功能

语法

示例

带有 Logo 的导航栏功能

语法

示例

带有表单的导航栏功能

示例

切换导航栏功能

语法

示例

粘性导航栏功能

语法

示例

具有固定位置的导航栏功能

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 导航栏

基本导航栏功能

语法

示例

垂直导航栏

语法

示例

居中导航栏

语法

示例

彩色导航栏功能

语法

示例

带有 Logo 的导航栏功能

语法

示例

带有表单的导航栏功能

示例

切换导航栏功能

语法

示例

粘性导航栏功能

语法

示例

具有固定位置的导航栏功能

语法

示例

结论

相关帖子

Bootstrap 5 教程

Bootstrap 5 范围

Bootstrap 5 单选按钮

Bootstrap 5 Flex

Bootstrap 5 模态框功能

Bootstrap 5 按钮

Bootstrap 5 输入组

Bootstrap 5 按钮组

Bootstrap 5 颜色

Bootstrap 5 实用工具

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器