Bootstrap - 导航演示



什么是导航栏?

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

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

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

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

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

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

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

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

以下是一些导航栏的示例。

示例 描述 下载链接
基本导航栏 此示例显示 Bootstrap 中导航栏的基本结构。 下载
抽屉式导航栏 此示例显示在响应式网页设计中使用抽屉式导航栏。 下载
静态导航栏 此示例显示固定在其网页位置上的静态导航栏的实现。 下载
固定导航栏 此示例显示固定在视口顶部的导航栏 (fixed-top)。 下载
底部导航栏 此示例显示导航栏固定在页面底部。 下载
抽屉式导航栏 此示例显示一个可以扩展为滑动抽屉式菜单的导航栏。 下载
广告