导航栏是位于页面顶部的导航页眉：

通过使用 Bootstrap，导航栏可以扩展或折叠，具体取决于屏幕大小。

请使用 .navbar 类创建标准导航栏，然后是响应式折叠类：.navbar-expand-xxl|xl|lg|md|sm（在特大、超大、大、中型设备上水平排列，或小屏幕上垂直堆叠导航栏）。

如需在导航栏中添加链接，请使用 class="navbar-nav" 的 元素（或 ）。然后添加带有 .nav-item 类的 元素，后跟带有 .nav-link 类的 元素：

亲自试一试

删除 .navbar-expand-* 类可创建始终垂直的导航栏：

亲自试一试

添加 .justify-content-center 类可将导航栏居中：

亲自试一试

请使用任何 .bg-color 类来更改导航栏的背景颜色：

提示：请使用 .navbar-dark 类为导航栏中的所有链接添加白色文本颜色，或使用 .navbar-light 类添加黑色文本颜色。

亲自试一试

活动/禁用状态：将 .active 类添加到 元素可突出显示当前链接，或添加 .disabled 类来指示链接不可点击。

.navbar-brand 类用于突出显示页面的品牌/标志/项目名称：

亲自试一试

如果将 .navbar-brand 类与图像一起使用时，Bootstrap 5 将自动设置图像样式，在垂直方向适应导航栏。

亲自试一试

请使用 .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。

亲自试一试

很多时候，尤其是在小屏幕上，您希望隐藏导航链接并用一个按钮替代它们，并在单击该按钮时显示它们。

如需创建可折叠导航栏，请使用已设置 class="navbar-toggler"、data-bs-toggle="collapse" 和 data-bs-target="#thetarget" 的按钮。然后将导航栏内容（链接等）包裹在 class="collapse navbar-collapse" 的 元素中，后跟与按钮的 data-bs-target 匹配的 id："thetarget"。

亲自试一试

提示：您还可以删除 .navbar-expand-md 类以始终隐藏导航栏链接并显示切换按钮。

导航栏可容纳下拉菜单：

亲自试一试

您还可以在导航栏中包含表单：

亲自试一试

导航栏也可以固定在页面的顶部或底部。

固定导航栏会在独立于页面滚动的固定位置（顶部或底部）保持可见。

.fixed-top 类使导航栏固定在页面的顶部：

亲自试一试

请使用 .fixed-bottom 类把导航栏停留在页面底部：

亲自试一试

请使用 .sticky-top 类使导航栏在滚动经过它时固定/停留在页面的顶部。

注释：此类在 IE11 及更早版本中不起作用（将其视为 position:relative）。

亲自试一试

W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。

关于 W3School 帮助 W3School 使用条款 隐私条款 技术支持：赢科 蒙ICP备06004630号