logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间：
Dropdown 下拉菜单NavMenu 导航菜单
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

NavBar

为页面和功能提供导航的菜单列表。

基础用法


导航链接

列表使用 li 标签

列表使用 a 标签

导航栏中使用下拉菜单。下拉菜单需要一个环绕元素进行定位，因此请务必对 .nav-item 和 .nav-link 使用单独的嵌套元素


表单

在 .navbar 的直接子元素使用 Flex 布局，并且默认为 justify-content:space-between

文本

根据需要与其他组件和工具混合搭配

风格

位置

默认

固定顶部

固定底部

黏住顶部

黏住底部


滚动

添加到 .navbar-nav,在折叠导航栏的可切换内容中启用垂直滚动。默认情况下，滚动在 75vh（或视口高度的 75%）处开始，但你可以使用本地 CSS 自定义属性 --bs-navbar-height 或自定义样式覆盖它。在较大的视口中，当导航栏展开时，内容将像在默认导航栏中一样显示

响应式行为

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

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

折叠按钮

隐藏品牌brand，折叠按钮在左侧。

品牌名称显示在左侧，折叠按钮显示在右侧。

外部内容

有时你想使用折叠插件来触发结构上位于 .navbar 之外的内容的容器元素。 因为我们的插件适用于 id 和 data-bs-target 匹配，所以这很容易完成！
当你执行此操作时，我们建议添加额外的 JavaScript，以便在打开容器时以编程方式将焦点移动到容器。否则，键盘用户和辅助技术用户可能会很难找到新显示的内容 - 特别是如果打开的容器位于文档结构中的折叠按钮之前。我们还建议确保折叠按钮具有 aria-controls 属性，指向内容容器的 id。理论上，这允许辅助技术用户直接从折叠按钮跳转到它控制的容器，但目前对此的支持还很不完善

展开抽屉

使用 offcanvas 组件将展开和折叠的导航栏转换为 offcanvas 抽屉。通过扩展了 offcanvas 默认样式并使用 .navbar-expand-* 类来创建动态且灵活的导航侧边栏。

使用 offcanvas 插件来创建一个导航栏，该导航栏可以在移动设备上展开。要创建一个在特定断点（如 lg）处扩展为普通导航栏的画布外导航栏，请使用 .navbar-expand-lg。

在深色导航栏中使用 Offcanvas 时，请注意，你可能需要在 Offcanvas 内容上使用深色背景，以避免文本变得难以辨认。在下面的示例中，我们将 .navbar-dark 和 .bg-dark 添加到 .navbar，将 .text-bg-dark 添加到 .offcanvas，将 .dropdown-menu-dark 添加到 .dropdown-menu，将 .btn-close-white 添加到 .btn-close，以便使用深色画布获得正确的样式。

样式

样式名称类型说明
.navbar-brandclass代表你的公司、产品或项目名称
.navbar-navclass用于全高和轻量级导航（包括对下拉菜单的支持）
.navbar-togglerclass折叠和导航切换
.navbar-textclass用于添加垂直居中的文本字符串
.collapse.navbar-collapseclass用于通过父断点分组和隐藏导航栏内容
.navbar-expand-*class`.navbar-expand{-sm
.navbar-scrollclass设置 max-height 和 滚动展开的导航栏内容
.navbar-nav-scrollclass添加到 .navbar-nav,在折叠导航栏的可切换内容中启用垂直滚动。默认情况下，滚动在 75vh（或视口高度的 75%）处开始，但你可以使用本地 CSS 自定义属性 --bs-navbar-height 或自定义样式覆盖它。在较大的视口中，当导航栏展开时，内容将像在默认导航栏中一样显示