Bootstrap强大的响应式导航标题导航栏的文档和示例。 包括对品牌、导航等的支持，包括对折叠插件的支持。

在开始使用导航栏之前，您需要了解以下内容：

导航栏内置了对一些子组件的支持。根据需要从以下选项中选择：

下面是一个例子，所有的子组件都包含在一个响应的光主题导航栏中，它会在lg (大) 断点处自动折叠。

此示例使用 颜色 (bg-light) 和 间距 (my-2, my-lg-0, me-sm-0, my-sm-0) 实用程序类。

.navbar-brand 可以应用于大多数元素，但锚定效果最好，因为有些元素可能需要实用程序类或自定义样式。

将图像添加到 .navbar-brand 可能总是需要自定义样式或实用程序来适当调整大小。这里有一些例子来说明。

导航栏导航链接建立在我们的.nav 选项的基础上，并带有自己的修饰符类，需要使用toggler 类 来实现正确的响应样式。 导航栏中的导航也将增长到占据尽可能多的水平空间 ，以保持您的导航栏内容安全对齐。

活动状态带有.active，以指示当前页可以直接应用于 .nav-link 或其直接父 .nav-item。

请注意，还应该在.nav-link 本身上添加 aria-current属性。

因为我们的导航系统使用类，所以如果您愿意，可以完全避免使用基于列表的方法。

也可以在导航栏中使用下拉列表。下拉菜单需要一个包装元素来定位，所以请确保对.nav-item 和 .nav-link 使用单独的嵌套元素，如下所示。

在导航栏中放置各种表单控件和组件：

.navbar的直接子元素使用flex布局，并将默认为justify-content: space-between。根据需要使用其他flex实用程序 来调整此行为。

输入组也起作用。如果导航栏是一个完整的表单，或者主要是一个表单，那么可以使用 元素作为容器并保存一些HTML。

这些导航栏表单也支持各种按钮。这也是一个很好的提醒，垂直对齐实用程序可以用来对齐不同大小的元素。

在.navbar-text的帮助下，导航栏可能包含一些文本。此类调整文本字符串的垂直对齐方式和水平间距。

根据需要与其他部件和实用程序混合搭配。

由于主题类和background-color实用程序的结合，导航栏的主题化从未如此简单。 从.navbar-light 中选择用于浅背景色，或从 .navbar-dark中选择用于深背景色。然后，使用.bg-* 实用程序进行自定义。

尽管这不是必需的，但是您可以将导航栏包装在一个.container中，以使其在页面上居中–-尽管请注意，仍然需要一个内部容器。 或者可以在.navbar 中添加一个容器，使 固定或静态顶部导航栏的内容仅居中。

使用任何响应容器更改导航栏中内容的显示宽度。

使用我们的位置工具将导航栏放置在非静态位置。 选择“固定到顶部”、“固定到底部”或“粘贴到顶部”（滚动页面直到页面到达顶部，然后停留在那里）。 固定导航栏 使用 position: fixed，这意味着它们是从DOM的正常流中提取的，可能需要定制CSS（例如，在上padding-top）以防止与其他元素重叠。

另外请注意， .sticky-top 使用 position: sticky，这并不是每个浏览器都完全支持的。。

导航栏可以使用.navbar-toggler、 .navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl|-xxl} 类来确定它们的内容何时折叠到按钮后面。结合其他实用程序，可以轻松选择何时显示或隐藏特定元素。

对于从不折叠的导航栏，请在导航栏上添加.navbar-expand。对于总是折叠的导航栏，不要添加任何.navbar-expand 类。

默认情况下，导航栏开关是左对齐的，但是如果它们跟随一个兄弟元素，比如.navbar-brand，它们将自动对齐到最右边。反转标记将反转触发器的位置。下面是不同切换样式的示例。

最小断点处没有显示 .navbar-brand ：

左侧显示品牌名称，右侧显示切换：

左边是切换，右边是品牌名称：

有时您需要使用 collapse 插件为结构上位于 .navbar之外的内容触发容器元素。因为我们的插件工作在 id 和 data-bs-target 匹配上，这很容易做到！

当您这样做时，我们建议包含额外的JavaScript，以便在打开容器时以编程方式将焦点移动到容器中。否则，键盘用户和辅助技术用户很可能很难找到最新披露的内容，特别是如果打开的容器在文档结构中的触发器之前。我们还建议确保 toggler 具有 aria-controls属性，指向内容容器的 id。理论上，这允许辅助技术用户直接从切换程序跳转到它控制的容器——但目前对此的支持还很不完善。