Bootstrap 标签页/胶囊
Bootstrap Tabs 和 Pills
Section titled “Bootstrap Tabs 和 Pills”使用 Tabs 和 Pills 创建导航菜单
Section titled “使用 Tabs 和 Pills 创建导航菜单”Bootstrap 提供了简单的方法来创建 tab 式或 pill 式的导航菜单。它们通常使用带有特定 Bootstrap class 的无序列表 <ul> 构建。
一个基本的 HTML 列表菜单可能看起来像这样：
<ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li></ul>要创建一个简单的水平内联列表菜单，可以将 .list-inline class 添加到 <ul>，并将 .list-inline-item 添加到每个 <li>。然而，对于更结构化的导航，Bootstrap 的 Nav component（组件）（包括 tabs 和 pills）功能更强大。
Tabs 导航
Section titled “Tabs 导航”通过将 .nav 和 .nav-tabs class 添加到 <ul> 元素来创建 Tabs。单独的 tab item（项）（<li>）应具有 .nav-item class，其链接（<a>）应具有 .nav-link class。
通过向 .nav-link 添加 .active class 来标记当前活动的页面/tab（以及可选的 aria-current="page" 用于 accessibility（可访问性））。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tabs Example</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container mt-3"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu 2</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script></body></html>带 Dropdown Menu（下拉菜单）的 Tabs
Section titled “带 Dropdown Menu（下拉菜单）的 Tabs”Tabs 还可以包含 dropdown menu。在 .nav-item.dropdown 内使用标准的 dropdown 结构。
<!DOCTYPE html><html lang="en"><body><ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu 1</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Submenu 1-1</a></li> <li><a class="dropdown-item" href="#">Submenu 1-2</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Submenu 1-3</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu 2</a> </li></ul><!-- Requires Bootstrap CSS and JS --></body></html>Pills 导航
Section titled “Pills 导航”Pills 的创建方式与 tabs 类似，但在 <ul> 元素上使用 .nav-pills class 而不是 .nav-tabs。活动状态同样通过在 .nav-link 上添加 .active class 来标记。
<!DOCTYPE html><html lang="en"><body><ul class="nav nav-pills mb-3"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu 2</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li></ul><!-- Requires Bootstrap CSS and JS --></body></html>垂直方向的 Pills
Section titled “垂直方向的 Pills”要垂直显示 pills，请将 .flex-column utility class（工具类）添加到 .nav-pills 元素。这利用了 Bootstrap 的 flexbox utility（工具）功能。
<!DOCTYPE html><html lang="en"><body><div class="container mt-3"> <div class="row"> <div class="col-md-9"> <p>Main content area...</p> </div> <div class="col-md-3"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu 3</a> </li> </ul> </div> </div></div><!-- Requires Bootstrap CSS and JS --></body></html>带 Dropdown Menu 的 Pills
Section titled “带 Dropdown Menu 的 Pills”Pills 也可以包含 dropdown menu，就像 tabs 一样。
<!DOCTYPE html><html lang="en"><body><ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu 1</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Submenu 1-1</a></li> <li><a class="dropdown-item" href="#">Submenu 1-2</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu 2</a> </li></ul><!-- Requires Bootstrap CSS and JS --></body></html>填充和两端对齐的 Navs
Section titled “填充和两端对齐的 Navs”要使 tabs 或 pills 占据其父容器的完整宽度，可以使用 .nav-fill（每个 nav item 获得可用宽度的均等部分）或 .nav-justified（类似于 fill，但 item 内的文本也会两端对齐）。请注意，在小于 576px 的屏幕（Bootstrap 的 sm breakpoint）上，除非被覆盖，否则这些 nav 将垂直堆叠。
<!DOCTYPE html><html lang="en"><body><!-- Nav Fill Example --><ul class="nav nav-pills nav-fill mb-3"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Longer nav link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li></ul>
<!-- Nav Justified Example --><ul class="nav nav-tabs nav-justified"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Much longer nav link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li></ul><!-- Requires Bootstrap CSS and JS --></body></html>使用 JavaScript 实现动态 Tabs 和 Pills
Section titled “使用 JavaScript 实现动态 Tabs 和 Pills”要使 tabs 或 pills 具有交互性，允许用户在内容 pane（窗格）之间切换，你需要使用 Bootstrap 的 Tab JavaScript plugin（插件）。这通常通过在链接上使用 data-bs-toggle="tab"（或 data-bs-toggle="pill"）属性来实现。
每个链接的 href 或 data-bs-target 属性应指向相应 .tab-pane 元素的 id。将所有 .tab-pane 元素包裹在一个带有 .tab-content class 的 div 中。
为了 accessibility（可访问性），将 role="tablist" 添加到 <ul>，将 role="tab" 添加到每个 tab 链接，在指向 pane ID 的链接上添加 aria-controls，并在每个 pane 上添加带有 aria-labelledby 的 role="tabpanel"。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Tabs Example</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container mt-3"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0"> <h3 class="mt-3">HOME Content</h3> <p>This is the content for the Home tab. It is shown by default.</p> </div> <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"> <h3 class="mt-3">Profile Content</h3> <p>This is some content for the Profile tab.</p> </div> <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0"> <h3 class="mt-3">Contact Content</h3> <p>Contact information or a form could go here.</p> </div> </div></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script></body></html>.fade class 添加了淡入淡出 transition（过渡）效果，而 .show 使活动的 tab pane 可见。在初始可见的 tab 链接和 tab pane 上使用 .active。
动态 Pills 的工作方式完全相同，只需将 .nav-tabs 替换为 .nav-pills 并确保使用 data-bs-toggle="pill"（尽管 data-bs-toggle="tab" 在很多情况下也可以互换使用）。核心的 JavaScript 功能是相同的。
完整的 Bootstrap Navs 和 Tabs 参考
Section titled “完整的 Bootstrap Navs 和 Tabs 参考”有关所有 navigation class、选项、方法和事件的完整参考，请查阅官方 Bootstrap 文档中关于 ‘Navs & Tabs’ 的部分。