bootstrap_ref_comp_navs

Bootstrap 导航组件及相关组件参考

导航组件 (Tabs 和 Pills)

Bootstrap 的导航组件 (navs) 基于 .nav 基础类构建，并提供几种样式。关键类包括：

.nav: 所有导航组件的基础类。
.nav-tabs: 创建标签页（tab）式导航。
.nav-pills: 创建药丸（pill）式导航。
.nav-item: 应用于导航组件内的 <li> 元素。
.nav-link: 应用于 .nav-item 内的 <a> 元素。可以拥有 .active 状态和 .disabled 状态。
.flex-column: 用于使导航组件（特别是 pills）垂直堆叠的工具类。
.nav-fill: 使导航项占据其父容器内等宽空间。
.nav-justified: 与 .nav-fill 类似，使导航项占据等宽空间，但文本也进行对齐。最适用于宽度相似的项目。
.dropdown, .dropdown-toggle, .dropdown-menu, .dropdown-item: 用于向导航项添加下拉菜单。需要 data-bs-toggle=“dropdown”。
.tab-content, .tab-pane: 与 .nav-tabs 或 .nav-pills 配合使用，创建可切换的标签页内容。需要在导航链接上添加适当的 data-bs-toggle 属性（data-bs-toggle=“tab” 或 data-bs-toggle=“pill”）和对应的 JavaScript，并在 .tab-pane 元素上设置对应的 ID。

可切换标签页示例：

<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>
  ...
</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">...</div>
  ...
</div>

用于指示当前页面在导航层级中的位置。分隔符通过 CSS 自动添加。

.breadcrumb: 面包屑列表的主要容器。
.breadcrumb-item: 应用于面包屑内的每个列表项。
.active: 应用于表示当前页面的 .breadcrumb-item（通常是最后一项）。

示例：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

分页 (Pagination)

提供用于在一系列页面中导航的链接。

.pagination: 分页组件的主要容器。
.page-item: 应用于每个列表项（链接容器）。
.page-link: 应用于每个 .page-item 内的 <a> 或 <span>。
.active: 表示当前页面（应用于 .page-item）。
.disabled: 表示不可点击的链接（应用于 .page-item）。
.pagination-lg / .pagination-sm: 用于创建更大或更小的分页链接（应用于 .pagination 容器）。

示例：

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

注意: Bootstrap 3 中的 Pager 组件（.pager, .previous, .next）已移除。可以使用简单的分页或工具类来实现类似功能。

标记/徽章 (Badges) (原 Labels)

Badges 是小型计数和标记组件。它们通过相对字体大小和 em 单位进行缩放，以匹配其紧邻的父元素的尺寸。

.badge: Badge 的基础类。
.bg-*: 上下文相关的背景颜色类（例如，.bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark）。文本颜色通常会自动对比，如果需要，对于浅色背景可以使用 .text-dark。
.rounded-pill: 使 badges 更圆润（药丸形状）。

示例：

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-danger rounded-pill">4</span>
</button>

英雄区域 (Hero Sections) (Jumbotron 替代)

Bootstrap 5 中已移除 .jumbotron 类。要创建类似的“hero”区域，用于突出显示特色内容或信息，请使用工具类设置内边距（例如，.p-5）、背景颜色（例如，.bg-light）、圆角（例如，.rounded-3）和排版（例如，.display-*）。

示例：

<div class="p-5 mb-4 bg-light rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">Custom jumbotron</h1>
    <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
    <button class="btn btn-primary btn-lg" type="button">Example button</button>
  </div>
</div>

要使 hero 区域全屏宽度且无圆角，请将其放置在任何 .container 类外部，并省略圆角工具类。

有关更多详细信息和高级用法，请始终参考每个特定组件的官方 Bootstrap 5 文档。