Bootstrap 5 导航栏
导航栏
导航栏是一个导航标题，放置在页面的顶部。
基本导航栏
使用 Bootstrap，导航栏可以根据屏幕尺寸进行扩展或折叠。
标准导航栏使用 .navbar 类创建，后面跟着响应式折叠类：.navbar-expand-xxl|xl|lg|md|sm（在超大、特大、大、中或小屏幕上垂直堆叠导航栏）。
要在导航栏中添加链接，可以使用 <ul> 元素（或 <div>），并带有 class="navbar-nav"。然后添加带有 .nav-item 类的 <li> 元素，后面跟着带有 .nav-link 类的 <a> 元素。
示例
<!-- 灰色水平导航栏，在小屏幕上变为垂直 -->
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<!-- 链接 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">链接 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 3</a>
</li>
</ul>
</div>
</nav>
自己尝试一下 »
垂直导航栏
删除 .navbar-expand-* 类以创建始终垂直的导航栏。
居中导航栏
添加 .justify-content-center 类以居中导航栏。
彩色导航栏
使用任何 .bg-color 类来更改导航栏的背景颜色（.bg-primary、 .bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark 和 .bg-light）。
提示：使用 .navbar-dark 类将导航栏中所有链接的文本颜色设置为白色，或使用 .navbar-light 类将文本颜色设置为黑色。
示例
<!-- 灰色带黑色文本 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">活动</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>
<!-- 黑色背景带白色文本 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 蓝色背景带白色文本 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
自己尝试一下 »
活动/禁用状态：在 <a> 元素中添加 .active 类以突出显示当前链接，或添加 .disabled 类以指示链接不可点击。
品牌/徽标
.navbar-brand 类用于突出显示页面中的品牌/徽标/项目名称。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">徽标</a>
</div>
</nav>
自己尝试一下 »
当使用 .navbar-brand 类显示图像时，Bootstrap 5 会自动将图像样式设置为垂直适合导航栏。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="头像徽标" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav>
自己尝试一下 »
导航栏文本
使用 .navbar-text 类垂直对齐导航栏内不是链接的任何元素（确保适当的填充和文本颜色）。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">导航栏文本</span>
</div>
</nav>
自己尝试一下 »
在大多数情况下，特别是在小屏幕上，您可能希望隐藏导航链接，并用一个按钮替换它们，该按钮在点击时应该显示这些链接。
要创建可折叠的导航栏，请使用带有 class="navbar-toggler", data-bs-toggle="collapse" and data-bs-target="#thetarget" 的按钮。然后将导航栏内容（链接等）包装在带有 class="collapse navbar-collapse" 的 <div> 元素中，后面跟着与按钮的 data-bs-target 匹配的 ID：“thetarget”。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">徽标</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<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" href="#">链接</a>
</li>
</ul>
</div>
</div>
</nav>
自己尝试一下 »
提示：您也可以删除 .navbar-expand-md 类以始终隐藏导航栏链接并显示切换按钮。
带有下拉菜单的导航栏
导航栏也可以包含下拉菜单。
示例
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">下拉菜单</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接</a></li>
<li><a class="dropdown-item" href="#">另一个链接</a></li>
<li><a class="dropdown-item" href="#">第三个链接</a></li>
</ul>
</li>
自己尝试一下 »
导航栏表单和按钮
您也可以在导航栏中包含表单。
示例
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">徽标</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">链接</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="搜索">
<button class="btn btn-primary" type="button">搜索</button>
</form>
</div>
</div>
</nav>
自己尝试一下 »
固定导航栏
导航栏也可以固定在页面的顶部或底部。
固定导航栏保持在固定位置（顶部或底部）可见，与页面滚动无关。
.fixed-top 类使导航栏固定在顶部。
使用 .fixed-bottom 类使导航栏始终停留在页面的底部。
使用 .sticky-top 类使导航栏在您滚动到它下方时固定/停留在页面的顶部。注意：此类在 IE11 和更早版本中不起作用（将被视为 position:relative）。
