如何在 Bootstrap5 中创建 Pills 导航菜单？
在本文中，我们将学习如何在 Bootstrap 5 中制作 Pills 导航菜单。Pills 是一种很好的导航样式，可以为您的网站实施，因为它可以增强您网站的用户体验和导航流程。创建药丸导航菜单简单易行，您所要做的就是包含正确的引导类并了解这些类将执行什么函数。我们将讨论药丸导航有益于使用的所有情况。让我们一一开始。
有两种方法可以在 HTML 中应用引导程序：
- 通过使用 Bootstrap CDN 链接
- 从官方网站下载引导程序。
有关安装和配置过程的更多详细信息，请参阅 Bootstrap 介绍和安装文章。
创建一个简单的药丸导航菜单：为了创建一个简单的药丸导航菜单，您只需将.nav-pills类与.nav类一起添加到您的导航元素中，该类是引导程序中可用的每种导航样式的基类. .nav 类元素包含在所有.nav-link类元素中。应该为导航栏中存在的所有链接元素提供.nav-link类。
示例：此示例显示药丸导航菜单的基本实现。
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science portal for geeks.
It contains well written, well thought and well
explained computer science and programming
articles, quizzes and practice/competitive
programming/company interview Questions.
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science portal for geeks.
It contains well written, well thought and well
explained computer science and programming
articles, quizzes and practice/competitive
programming/company interview Questions.
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming articles, quizzes and
practice/competitive programming/company interview
Questions.
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming articles, quizzes and
practice/competitive programming/company interview
Questions.
HTML
Pills navigation menu
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and programming
articles, quizzes and practice/
competitive programming/company interview
Questions.
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science portal
for geeks. It contains well written, well
thought and well explained computer science
and programming articles, quizzes and
practice/competitive programming/company
interview Questions.
解释：
- .p-4类实现元素的填充。
- .bg-waring实现了黄色阴影的背景颜色。
- .bg-dark实现深色背景。
- .active类描述了用户对您网页的当前视图。
- .text-warning将文本颜色设为黄色。
输出：
一个简单的药丸导航菜单
创建右对齐的药丸导航：要右对齐元素，您可以对元素使用.ms-auto 类。
示例：在此示例中，我们使用了.ms-auto类，其 Signup 移到了右侧。
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science portal for geeks.
It contains well written, well thought and well
explained computer science and programming
articles, quizzes and practice/competitive
programming/company interview Questions.
输出：
右对齐药丸导航
创建一个跨越全屏的药丸导航：要使药丸占据屏幕的整个宽度，我们可以使用 .nav-fill类。此类通过操纵.nav-link项目的宽度来填满整个屏幕。
示例：在此示例中，我们使用了.nav-fill类，该类将创建跨越全屏的药丸导航。
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming articles, quizzes and
practice/competitive programming/company interview
Questions.
输出：
全屏跨越药丸导航菜单
创建每个链接宽度相等的 Pills 导航：从前面的示例中，尽管导航链接跨越全屏，但每个导航链接都采用不同的宽度才能做到这一点。在这个例子中，我们将看到我们如何跨越全屏以及每个导航链接占用相等的水平宽度/空间。对于等宽，我们在 nav 元素中使用.nav-justified类而不是.nav-fill类。
示例：此示例显示了对齐的药丸导航菜单。
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming articles, quizzes and
practice/competitive programming/company interview
Questions.
输出：
合理的药丸导航菜单
提示：使用 Chrome Web 开发人员工具检查模式以查看差异。
创建固定的药丸导航：固定导航意味着导航栏将在您滚动时固定在屏幕顶部。要实现此功能，请将类.fixed-top添加到 nav 元素。
示例：此示例使用.fixed-top类说明了固定的药丸导航栏。
HTML
Pills navigation menu
输出：
固定药丸导航
创建具有下拉导航的药丸：要创建具有下拉导航的药丸，我们需要将.dropdown 类包含到一个 div 中，该 div 包含具有.dropdown-menu类和 .dropdown-menu 类的元素。 dropdown-toggle类，它被赋予包裹在其中的 nav-link 元素。
.dropdown-menu 类被赋予一个无序列表，其中包含出现在下拉菜单中的所有菜单内容。它还包含.dropdown-item类的元素，指示菜单中存在的每个项目。
data-bs-toggle属性应赋予 .nav-link 元素，其值为“下拉”，因为单击时我们将切换下拉视图。此外，.nav-link 元素的角色属性应设置为“按钮”。
示例：此示例说明了具有下拉功能的导航栏药丸。
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and programming
articles, quizzes and practice/
competitive programming/company interview
Questions.
输出：
带有下拉菜单的药丸导航
创建可折叠药丸导航菜单：要创建可折叠药丸导航菜单，请使用带有 class 的按钮。具有属性data-bs-toggle 和 data-bs-target 的导航栏切换器。在按钮内跨越一个具有类.navbar-toggler-icon的元素。在这里，我们还使用了 fontawesome 来获取汉堡菜单图标。然后，用 class 包装.nav-links元素。 navbar-collapse 和 .collapse 以及#navbar-collapse的 id。使用类.collapse作为属性data-bs-toggle的值，使用id作为data-bs-target属性的值。
示例：此示例说明了可折叠药丸导航菜单。
HTML
Pills navigation menu
GeeksforGeeks - A Computer Science portal
for geeks. It contains well written, well
thought and well explained computer science
and programming articles, quizzes and
practice/competitive programming/company
interview Questions.
输出：
可折叠药丸导航