Bootstrap 导航栏
在本教程中，您将学习如何使用 Bootstrap 导航栏组件创建静态和固定定位的响应式导航标题。
使用 Bootstrap 创建导航栏
您可以使用 Bootstrap 导航栏组件为您的网站或应用程序创建响应式导航标题。 这些响应式导航栏将在具有小视口（如手机）的设备上折叠，但当用户单击切换按钮时会展开。 但是，在笔记本电脑或台式机等中型和大型设备上，它将像往常一样是水平的。
您还可以轻松创建不同的导航栏变体，例如带有下拉菜单和搜索框的导航栏以及固定定位的导航栏。 以下示例将向您展示如何创建带有导航链接的简单静态导航栏。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</div>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>— 上面示例的输出将如下所示：
提示： 导航栏需要 .navbar 和 .navbar-expand{-sm|-md|-lg|-xl|-xxl} 的包装用于响应式折叠，并需要颜色方案类用于外观。 此外，使用间距和 flex 实用程序类来控制导航栏中的间距和对齐方式。
注意：默认情况下，导航栏及其内容是流畅的。 更改容器（例如 .container{-sm|-md|-lg|-xl|-xxl}）以不同方式限制其水平宽度。
将徽标图像添加到导航栏
您还可以将徽标图像放置在导航栏中，而不是纯文本。 但是，您需要手动设置徽标高度以使其正确适合导航栏，如下所示：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a href="#" class="navbar-brand">
<img src="images/logo.png" height="28" alt="CoolBrand">
</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</div>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>— 上面示例的输出将如下所示：
提示： 使用 实用程序类 如 .ms-auto, .me-auto, .justify-content-between 等对齐导航栏内的导航链接、表单、按钮或文本。
向导航栏添加下拉菜单
您还可以在导航栏中包含下拉菜单和搜索框，如下所示：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</div>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>— 上面示例的输出将如下所示：
查看片段部分以获取一些设计精美的 Bootstrap 导航栏的示例。
在导航栏中放置搜索表单
搜索表单是导航栏的一个非常常见的组件，您经常在各种网站上看到它。 您可以使用 <form> 元素上的类 .d-flex 在导航栏中放置各种表单控件，如下例所示：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
</div>
<form class="d-flex">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<button type="button" class="btn btn-secondary"><i class="bi-search"></i></button>
</div>
</form>
<div class="navbar-nav">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>— 上面示例的输出将如下所示：
更改导航栏的配色方案
您还可以通过将 .navbar-light 用于浅色背景颜色或将 .navbar-dark 用于深色背景颜色来更改导航栏的配色方案。 然后，用背景颜色实用程序类定制它，比如 .bg-dark, .bg-primary，等等。
或者，您也可以自己在 .navbar 元素上应用 CSS background-color 属性来自定义导航栏主题，如下例所示：
<nav class="navbar navbar-dark bg-dark">
<!-- 导航栏内容 -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- 导航栏内容 -->
</nav>
<nav class="navbar navbar-light" style="background-color: #ddeeff;">
<!-- 导航栏内容 -->
</nav>— 上面示例的输出将如下所示：
Bootstrap 固定导航栏
Bootstrap 还提供了创建固定在顶部、固定在底部或粘在顶部的导航栏的机制（即随着页面滚动直到它到达顶部，然后停留在那里）。
导航栏固定在顶部
将位置实用程序类 .fixed-top 应用于 .navbar 元素以将导航栏固定在视口顶部，使其不会随页面滚动。 这是一个例子：
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar content -->
</nav>导航栏固定在底部
同样，将类 .fixed-bottom 添加到 .navbar 元素以将导航栏固定在视口底部。 它也不会随页面滚动。 让我们看看它是如何工作的：
<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar content -->
</nav>导航栏粘在顶部
您还可以通过简单地使用 .navbar 元素上的 .sticky-top 类来创建随页面滚动直到到达顶部然后停留在那里的粘性顶部导航栏，如下所示：
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar content -->
</nav>提示：将 .navbar 内容放在 .container、.container-fluid 或 .container{-sm|-md|-lg|-xl|-xxl} 内，以便正确填充并与其余内容对齐。