列表组

列表组是用于显示一系列内容的灵活且强大的组件。可以对其进行修改和扩展，以支持几乎任何内部内容。

本页目录

基本示例

最基本的列表组是一个带有列表项和适当类的无序列表。可以根据下面的选项，或根据需要使用你自己的 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>

链接和按钮

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

制造 .list-group-item-action 实例出现通过添加禁用 .disabled，和 aria-disabled="true" 通知辅助技术该元素已被禁用。你可能需要额外的 JavaScript 来完全禁用链接和按钮。

请确保不要在这里使用标准的.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 href="#" 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>

无边框（Flush）

添加 .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> 默认的浏览器样式），以便在列表组项目中更好地放置，并允许更好的自定义。

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

列表项
列表项
列表项

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>

这些也非常适合自定义内容。

副标题
列表项内容
14
副标题
列表项内容
14
副标题
列表项内容
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 mixin 已被弃用。列表组项的变体现在在 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>

自定义内容

几乎可以在其中添加任何 HTML，即使是像下面这样的链接列表组，也可以借助 flexbox 工具。

列表组项目标题

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>

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

第一个复选框
第二个复选框
第三个复选框

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 mixin

在 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;
<span class="token selector"><span class="token parent important">&amp;</span>.list-group-item-action </span><span class="token punctuation">{</span>
  <span class="token selector"><span class="token parent important">&amp;</span>:hover,
  <span class="token parent important">&amp;</span>:focus </span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">shade-color</span><span class="token punctuation">(</span><span class="token variable">$background</span><span class="token punctuation">,</span> 10%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector"><span class="token parent important">&amp;</span>.active </span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$white</span><span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
    <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
}
}

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>

使用数据属性

你可以无需编写任何 JavaScript 就激活列表组导航，只需在元素上指定 data-bs-toggle="list" 或。在 .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`事件发生之前）。

事件

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

hide.bs.tab（在当前活动标签页上）
show.bs.tab（在将显示的标签页上）
hidden.bs.tab（在之前的活动标签页上，与hide.bs.tab事件相同）
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
  })
})