Bootstrap - 导航演示

什么是导航栏？

Bootstrap 导航栏是网页顶部的响应式导航标题。它可以根据屏幕尺寸展开或折叠，为网站提供用户友好的导航体验。

Bootstrap 提供内置 CSS 类来创建标准导航栏。

  • .navbar类用于创建导航栏组件。

  • .navbar -brand类代表网站或应用程序的品牌或徽标。

  • .navbar -collapse类使导航菜单折叠成下拉菜单或切换按钮。

  • .navbar -nav类用于创建具有多个导航链接或项目的水平导航菜单。

  • .nav -item类应应用于导航栏中的每个列表项 (<li>)。

  • .nav -link类用于在导航组件中设置锚标记 ( <a> ) 的样式。

导航栏的一些示例如下。

例子 描述 下载链接
基本导航栏 此示例展示了 Bootstrap 中导航栏的基本结构。 下载
画布外的导航栏 此示例展示了在响应式网页设计中使用 offcanvas 导航栏。 下载
导航栏静态 此示例展示了固定在网页上其位置的静态导航栏的实现。 下载
导航栏已修复 此示例显示固定在视口顶部的导航栏（固定顶部）。 下载
导航栏底部 此示例显示导航栏在页面底部有一个固定位置。 下载
Offcanvas 导航栏 此示例显示了一个可以扩展为滑动画布菜单的导航栏。 下载