如何在 Bootstrap 中创建选项卡式药丸和垂直药丸导航菜单？
在本文中，我们将了解 Bootstrap 中的选项卡式药丸和垂直药丸导航菜单，并通过示例了解它们的实现。这些类型的导航菜单用于以不同的方式装饰导航栏，具有特定的独特导航风格，以增强网站的用户体验和导航流程，同时帮助使用 Bootstrap 预定义类创建简单易用的导航菜单。我们将依次讨论每种导航样式。让我们从创建一个简单的菜单开始。
简单菜单：此菜单在导航栏中用于将许多其他页面链接到当前页面。为了创建简单的导航栏，我们可以使用list-inline类来列出项目。
句法：
示例：在此示例中，我们创建了一个简单的菜单。
输出：
选项卡：为了创建选项卡菜单，我们将使用 . nav-tabs类生成选项卡式界面以及使用活动类使当前选项卡处于活动状态。
句法：
示例：此示例描述 Bootstrap 选项卡菜单。
HTML
GeeksforGeeks
Tabbed Menu
输出：
Pill：为了创建一个简单的药丸导航菜单，我们将.nav-pills类与.nav类一起添加到 nav 元素中，该类是引导程序中可用的每种导航样式的基类，同时使用活动类来制作当前选项卡处于活动状态。
句法：
示例：此示例描述了 Bootstrap 丸导航栏。
HTML
GeeksforGeeks
Pills
输出：
垂直药丸：要创建垂直药丸，我们将使用 . nav-pills和nav-stacked类以及.nav类作为引导程序中可用的每种导航样式的基类，并使用活动类使当前选项卡处于活动状态。
句法：
示例：此示例描述 Bootstrap 垂直药丸导航栏。
HTML
GeeksforGeeks
Vertical Pills
输出：
右对齐导航菜单：要右对齐元素，您可以使用 元素的.ms-auto 类。
示例：此示例描述 Bootstrap 右对齐导航菜单。
HTML
Pills navigation menu
GeeksforGeeks
输出：
对齐的药丸导航菜单：对于等宽，我们在 nav 元素中使用.nav-justified类。
示例：此示例描述 Bootstrap 对齐的药丸导航菜单。
HTML
Pills navigation menu
GeeksforGeeks
输出：
