Bootstrap 5 导航

基本的 ".nav" 类与链接共享 Bootstrap 导航栏的整体标记和样式。它导航栏中所有重要且必需的页面。我们获得了 Web 应用程序及其页面的整体结构。

Bootstrap 5 导航功能用于设计导航组件，这是创建各种导航组件类型的坚实基础。它添加了样式覆盖、基本的禁用样式和链接填充，以获得更宽的点击区域。

基本的 ".nav" 功能组件中没有 ".active" 状态。我们可以使用“disabled”功能默认停用或禁用链接内容。

基本导航栏

网页基本导航功能的默认设置为水平对齐。".nav" 类被插入到 "ul" 元素中，然后将每个 "li" 元素的 ".nav-item" 和 ".nav-link" 类添加进去。

语法

以下语法显示了基本导航功能。

示例

以下示例显示了使用 bootstrap 5 类的基本导航栏。

输出

基本导航栏显示在下图所示。

Bootstrap 5 导航栏对齐

导航功能是一个基本的导航功能网页。我们可以根据需要将导航功能对齐到页面的开始、中心和结束位置。导航功能分别使用 "justify-content-center" 和 "justify-content-end" 类来获得中心和结束位置。

语法

以下语法显示了用于中心对齐的基本导航功能。

示例

下图显示了导航功能的开始、中间和结束对齐方式。

输出

导航栏的对齐方式如下图所示。

垂直导航栏

"flext-column" 类适用于 html 元素（如 <div> 标签）上导航功能的垂直对齐。

语法

以下语法显示了用于垂直对齐的基本导航功能。

示例

以下示例显示了使用 bootstrap 5 类的垂直导航栏。

输出

垂直导航功能如下图所示。

Bootstrap 5 导航标签页

"flext-tab" 类适用于 html 元素（如 <div> 标签）上导航功能的表格格式。

语法

以下语法显示了带有标签页的基本导航功能。

示例

以下示例显示了使用 bootstrap 5 类的垂直导航栏。

输出

导航标签页功能如下图所示。

Bootstrap 5 导航胶囊

"flext-pills" 类适用于 html 元素（如 <div> 标签）上导航功能的胶囊格式。

语法

以下语法显示了带有胶囊的基本导航功能。

示例

以下示例显示了使用 bootstrap 5 类的带有胶囊的导航功能。

输出

导航胶囊功能如下图所示。

带有填充的导航功能标签页/胶囊

"nav-fills" 类用于获取水平导航项目所需的空间。此类适用于导航链接功能的“标签页”和“胶囊”。导航功能根据网页的宽度显示具有适当宽度的链接内容。

语法

以下语法显示了带有胶囊的对齐导航功能。

以下语法显示了带有标签页的对齐导航功能。

示例

以下示例显示了使用 bootstrap 5 类的带有填充的导航功能。

输出

带有填充类的导航功能如下图所示。

带有对齐的导航功能标签页/胶囊

"nav-justified" 类用于获取水平导航功能所需的空间。此类适用于导航功能的“标签页”和“胶囊”。对齐的导航功能显示具有相等宽度的链接内容。

语法

以下语法显示了带有胶囊的对齐导航功能。

以下语法显示了带有标签页的对齐导航功能。

示例

以下示例显示了使用 bootstrap 5 类的具有对齐宽度的导航功能。

输出

对齐的导航功能如下图所示。

带有下拉菜单的导航功能

下拉菜单功能在 bootstrap 5 导航功能内部使用。我们可以单击所需的链接来显示下拉菜单功能。“dropdown”类在带有“nav-item”类的 <li> 标签中使用。下拉切换与 <a> 标签内部的“nav-link”类一起使用。我们可以将下拉菜单放置在导航标签内。

示例

以下示例显示了使用 bootstrap 5 类的带有下拉菜单的基本导航栏。

输出

带有下拉菜单的导航标签页功能如下图所示。

带有可切换的导航功能

在点击导航链接后，可切换功能用于显示页面的特定标签。带有“.nav-link”类的 <a> 标签内部需要 data-bs-toggle = "tab" 功能。“tab-content”类显示了导航功能链接显示哪些数据。各自的 div 容器和导航项目需要 id 和 href。

语法

以下示例显示了使用 bootstrap 5 类的具有可切换功能的导航栏。

示例

以下示例显示了使用 bootstrap 5 类的具有可切换功能的导航栏。

输出

带有可切换功能的导航标签页功能如下图所示。

结论

bootstrap 5 导航功能是 Web 应用程序的基本导航功能。它可以帮助立即找到必需的和重要的链接。此功能对用户友好、简单且节省大型应用程序的空间。