Skip to main content Skip to docs navigation
在GitHub查看

列表组

列表组是一个灵活而强大的组件，用于显示一系列内容。修改和扩展它们以支持其中的几乎所有内容。

在此页

基本示例

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

  • 一个物品
  • 第二项
  • 第三项
  • 第四个项目
  • 还有第五个
网页格式 
<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到 a.list-group-item以指示当前活动选择。

  • 一个活跃的项目
  • 第二项
  • 第三项
  • 第四个项目
  • 还有第五个
网页格式 
<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到 a.list-group-item以使其显示为已禁用。请注意，某些元素.disabled还需要自定义 JavaScript 才能完全禁用其点击事件（例如，链接）。

  • 禁用的项目
  • 第二项
  • 第三项
  • 第四个项目
  • 还有第五个
网页格式 
<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>

使用s<a>或<button>s通过添加. 我们将这些伪类分开，以确保由非交互式元素（如s 或s）组成的列表组不提供点击或点击功能。.list-group-item-action<li><div>

一定不要在这里使用标准.btn类。

当前链接项 第二个链接项 第三个链接项 第四个链接项 禁用的链接项
网页格式 
<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">A disabled link item</a>
</div>

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

网页格式 
<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以删除一些边框和圆角以在父容器（例如，卡片）中呈现列表组项的边到边。

  • 一个物品
  • 第二项
  • 第三项
  • 第四个项目
  • 还有第五个
网页格式 
<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>，然后在with和上使用::before伪元素设置样式和放置。<li>counter-incrementcontent

  1. 列表项
  2. 列表项
  3. 列表项
网页格式 
<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
网页格式 
<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 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 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 bg-primary rounded-pill">14</span>
  </li>
</ol>

水平的

添加.list-group-horizontal以跨所有断点将列表组项的布局从垂直更改为水平。或者，选择一个响应式变体.list-group-horizontal-{sm|md|lg|xl|xxl}，使列表组从该断点的min-width. 当前水平列表组不能与刷新列表组组合。

专业提示：水平时想要等宽列表组项目吗？添加.flex-fill到每个列表组项。

  • 一个物品
  • 第二项
  • 第三项
  • 一个物品
  • 第二项
  • 第三项
  • 一个物品
  • 第二项
  • 第三项
  • 一个物品
  • 第二项
  • 第三项
  • 一个物品
  • 第二项
  • 第三项
  • 一个物品
  • 第二项
  • 第三项
网页格式 
<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 变量。

使用上下文类来设置具有状态背景和颜色的列表项的样式。

  • 一个简单的默认列表组项
  • 一个简单的主列表组项
  • 一个简单的二级列表组项
  • 一个简单的成功列表组项
  • 一个简单的危险列表组项
  • 一个简单的警告列表组项
  • 一个简单的信息列表组项
  • 一个简单的灯光列表组项
  • 一个简单的黑名单组项
网页格式 
<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-actionfor<a>和<button>元素。请注意，此处添加的悬停样式在上一个示例中不存在。还支持.active状态；应用它来指示上下文列表组项目上的活动选择。

一个简单的默认列表组项 一个简单的主列表组项 一个简单的二级列表组项 一个简单的成功列表组项 一个简单的危险列表组项 一个简单的警告列表组项 一个简单的信息列表组项 一个简单的灯光列表组项 一个简单的黑名单组项
网页格式 
<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
网页格式 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge 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 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 bg-primary rounded-pill">1</span>
  </li>
</ul>

自定义内容

在flexbox 实用程序的帮助下，在其中添加几乎所有 HTML，甚至对于像下面这样的链接列表组也是如此。

列表组项目标题
3天前

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

还有一些小字。
列表组项目标题
3天前

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

还有一些柔和的小字体。
列表组项目标题
3天前

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

还有一些柔和的小字体。
网页格式 
<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-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">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-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

复选框和收音机

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

网页格式 
<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>
网页格式 
<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-linkon<label>使整个列表组项目可点击。

网页格式 
<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 变量方法的一部分，列表组现在使用本地 CSS 变量.list-group来增强实时自定义。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。

  --#{$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 变量

$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 混入

Used in combination with $theme-colors to generate the contextual variant classes for .list-group-items.

@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 loop

Loop that generates the modifier classes with an overriding of CSS variables.

// 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);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);

    &.list-group-item-action {
      &:hover,
      &:focus {
        --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
        --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
      }

      &:active {
        --#{$prefix}list-group-active-color: var(--#{$prefix}emphasis-color);
        --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
        --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
      }
    }
  }
}

JavaScript behavior

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our list group to create tabbable panes of local content.

Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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>

Using data attributes

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
  })
})