跳至主要内容 跳至文档导航
在 GitHub 上查看

列表组

列表组是一种灵活且强大的组件，用于显示一系列内容。修改并扩展它们以支持几乎任何内容。

在此页面上

基本示例

最基本的列表组是一个无序列表，其中包含列表项和适当的类。根据需要使用以下选项或您自己的 CSS 对其进行构建。

  • 一个项目
  • 第二个项目
  • 第三个项目
  • 第四个项目
  • 第五个项目
html 
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

活动项

将 .active 添加到 .list-group-item 以指示当前活动选择。

  • 一个活动项
  • 第二个项目
  • 第三个项目
  • 第四个项目
  • 第五个项目
html 
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

禁用项

将 .disabled 添加到 .list-group-item 以使其看起来已禁用。请注意，某些带有 .disabled 的元素还需要自定义 JavaScript 才能完全禁用其点击事件（例如链接）。

  • 一个禁用项
  • 第二个项目
  • 第三个项目
  • 第四个项目
  • 第五个项目
html 
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

使用 <a> 或 <button> 通过添加 .list-group-item-action 来创建具有悬停、禁用和活动状态的可操作列表组项。我们分离这些伪类以确保由非交互元素（如 <li> 或 <div>）组成的列表组不会提供点击或轻触提示。

请务必不要在此处使用标准的 .btn 类。

当前链接项 第二个链接项 第三个链接项 第四个链接项 已禁用的链接项
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>

对于 <button>，您还可以使用 disabled 属性，而不是 .disabled 类。遗憾的是，<a> 不支持 disabled 属性。

html 
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

平齐

添加 .list-group-flush 以移除一些边框和圆角，以便在父容器（例如卡片）中将列表组项从边缘到边缘呈现。

  • 一个项目
  • 第二个项目
  • 第三个项目
  • 第四个项目
  • 第五个项目
html 
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

编号

添加 .list-group-numbered 修改器类（并可选择使用 <ol> 元素）以选择编号列表组项。数字通过 CSS 生成（而不是 <ol> 的默认浏览器样式），以便在列表组项内更好地放置，并允许更好地自定义。

数字由 <ol> 上的 counter-reset 生成，然后使用 <li> 上带有 counter-increment 和 content 的 ::before 伪元素进行样式化和放置。

  1. 列表项
  2. 列表项
  3. 列表项
html 
<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

这些也适用于自定义内容。

  1. 副标题
    列表项内容
    14
  2. 副标题
    列表项内容
    14
  3. 副标题
    列表项内容
    14
html 
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
</ol>

水平

添加 .list-group-horizontal 以将列表组项的布局从垂直更改为在所有断点处水平。或者，选择响应式变体 .list-group-horizontal-{sm|md|lg|xl|xxl}，以便从该断点的 min-width 开始使列表组水平。目前水平列表组不能与平齐列表组结合使用。

专业提示：希望在水平时列表组项等宽？向每个列表组项添加 .flex-fill。

  • 一个项目
  • 第二个项目
  • 第三个项目
  • 一个项目
  • 第二个项目
  • 第三个项目
  • 一个项目
  • 第二个项目
  • 第三个项目
  • 一个项目
  • 第二个项目
  • 第三个项目
  • 一个项目
  • 第二个项目
  • 第三个项目
  • 一个项目
  • 第二个项目
  • 第三个项目
html 
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

变体

注意！从 v5.3.0 开始，list-group-item-variant() Sass 混合已弃用。列表组项变体现在已在 Sass 循环 中覆盖其 CSS 变量。

使用上下文类对列表项进行样式化，使其具有状态背景和颜色。

  • 一个简单的默认列表组项目
  • 一个简单的主要列表组项目
  • 一个简单的次要列表组项目
  • 一个简单的成功列表组项目
  • 一个简单的危险列表组项目
  • 一个简单的警告列表组项目
  • 一个简单的信息列表组项目
  • 一个简单的浅色列表组项目
  • 一个简单的深色列表组项目
html 
<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

上下文类也适用于 .list-group-item-action，用于 <a> 和 <button> 元素。请注意此处添加了悬停样式，而前一个示例中没有。还支持 .active 状态；将其应用于上下文列表组项目以指示活动选择。

一个简单的默认列表组项目 一个简单的主要列表组项目 一个简单的次要列表组项目 一个简单的成功列表组项目 一个简单的危险列表组项目 一个简单的警告列表组项目 一个简单的信息列表组项目 一个简单的浅色列表组项目 一个简单的深色列表组项目
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
无障碍提示：仅使用颜色添加含义只会提供视觉指示，而不会传达给屏幕阅读器等辅助技术的用户。请确保含义从内容本身（例如，具有足够色差的可见文本）中显而易见，或通过其他方式包含，例如使用 .visually-hidden 类隐藏的附加文本。

带徽章

在任何列表组项目中添加徽章，以借助一些实用工具显示未读计数、活动等信息。

  • 一个列表项目 14
  • 第二个列表项目 2
  • 第三个列表项目 1
html 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge text-bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge text-bg-primary rounded-pill">1</span>
  </li>
</ul>

自定义内容

借助 Flexbox 实用程序，可以在其中添加几乎任何 HTML，甚至可以用于下面的链接列表组。

列表组项目标题
3 天前

段落中的一些占位符内容。

以及一些小字。
列表组项目标题
3 天前

段落中的一些占位符内容。

以及一些灰色的细小字。
列表组项目标题
3 天前

段落中的一些占位符内容。

以及一些灰色的细小字。
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
</div>

复选框和单选按钮

将 Bootstrap 的复选框和单选按钮放置在列表组项目中，并根据需要进行自定义。你可以在没有 <label> 的情况下使用它们，但请记住为可访问性包含一个 aria-label 属性和值。

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>
html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

你可以在 <label> 上使用 .stretched-link，以使整个列表组项目可点击。

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

变量

已在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，列表组现在在 .list-group 上使用本地 CSS 变量，以增强实时自定义。CSS 变量的值通过 Sass 设置，因此 Sass 自定义仍然受支持。

scss/_list-group.scss 
--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-action-color: #{$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass 变量

scss/_variables.scss 
$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

Sass 混合

已在 v5.3.0 中弃用
scss/mixins/_list-group.scss 
@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Sass 循环

生成具有 CSS 变量覆盖的修饰符类的循环。

scss/_list-group.scss 
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

JavaScript 行为

使用选项卡 JavaScript 插件（单独包含或通过已编译的 bootstrap.js 文件包含）来扩展我们的列表组，以创建本地内容的可选项卡窗格。

一些与“主页”相关的段落中的占位符内容。还有一些更多内容，仅在此处用于填充和填充此选项卡面板。在生产中，你显然会有更多真实的内容。而不仅仅是文本。它可以是任何东西，真的。文本、图像、表单。

一些与“个人资料”相关的段落中的占位符内容。还有一些更多内容，仅在此处用于填充和填充此选项卡面板。在生产中，你显然会有更多真实的内容。而不仅仅是文本。它可以是任何东西，真的。文本、图像、表单。

与“消息”相关的段落中的一些占位符内容。以及更多内容，此处仅用于填充和填充此选项卡面板。在实际生产中，您显然会有更多实际内容。而不仅仅是文本。它实际上可以是任何内容。文本、图像、表单。

与“设置”相关的段落中的一些占位符内容。以及更多内容，此处仅用于填充和填充此选项卡面板。在实际生产中，您显然会有更多实际内容。而不仅仅是文本。它实际上可以是任何内容。文本、图像、表单。

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

使用数据属性

您可以通过简单地指定 data-bs-toggle="list" 或在元素上激活列表组导航，而无需编写任何 JavaScript。对 .list-group-item 使用这些数据属性。

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

通过 JavaScript

通过 JavaScript 启用可选项卡列表项（每个列表项需要单独激活）

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

您可以通过多种方式激活各个列表项

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

淡入效果

要使选项卡面板淡入，请将 .fade 添加到每个 .tab-pane。第一个选项卡窗格还必须有 .show 才能使初始内容可见。

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

方法

所有 API 方法都是异步的，并启动一个转换。它们在转换启动后立即返回给调用者，但在转换结束之前。此外，将忽略对转换组件的方法调用。 在我们的 JavaScript 文档中了解更多信息。

将您的内容作为选项卡元素激活。

您可以使用构造函数创建选项卡实例，例如

const bsTab = new bootstrap.Tab('#myTab')
方法 说明
dispose 销毁元素的选项卡。
getInstance 静态方法，允许您获取与 DOM 元素关联的选项卡实例，您可以像这样使用它：bootstrap.Tab.getInstance(element)。
getOrCreateInstance 静态方法，返回与 DOM 元素关联的选项卡实例，或在未初始化的情况下创建一个新实例。您可以像这样使用它：bootstrap.Tab.getOrCreateInstance(element)。
show 选择给定的选项卡并显示其关联的窗格。任何先前选中的其他选项卡都将取消选中，其关联的窗格将被隐藏。在选项卡窗格实际显示之前返回给调用者（即在 shown.bs.tab 事件发生之前）。

事件

在显示新标签时，事件按以下顺序触发

  1. hide.bs.tab（在当前活动标签上）
  2. show.bs.tab（在即将显示的标签上）
  3. hidden.bs.tab（在以前活动标签上，与 hide.bs.tab 事件相同）
  4. shown.bs.tab（在新活动刚显示的标签上，与 show.bs.tab 事件相同）

如果尚未激活任何标签，则不会触发 hide.bs.tab 和 hidden.bs.tab 事件。

事件类型 说明
hide.bs.tab 当要显示新标签（因此要隐藏以前活动标签）时，会触发此事件。使用 event.target 和 event.relatedTarget 分别定位当前活动标签和即将激活的新标签。
hidden.bs.tab 显示新标签后（因此隐藏以前活动标签），会触发此事件。使用 event.target 和 event.relatedTarget 分别定位以前活动标签和新活动标签。
show.bs.tab 在标签显示时触发此事件，但在新标签显示之前。使用 event.target 和 event.relatedTarget 分别定位活动标签和以前活动标签（如果可用）。
shown.bs.tab 在显示标签后，在标签显示时触发此事件。使用 event.target 和 event.relatedTarget 分别定位活动标签和以前活动标签（如果可用）。 
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})