Bootstrap V5.3 : List group 列表组中文翻译版

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

基本示例

最基本的列表组是包含列表项和适当类的无序列表。使用以下选项或根据需要使用您自己的 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>

活动项目

添加到 a 以指示当前活动选择。.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>

链接和按钮

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

通过添加使实例显示为禁用，并通知辅助技术该元素已禁用。您可能需要额外的 JavaScript 才能完全禁用链接和按钮。.list-group-item-action.disabledaria-disabled="true"

请务必不要在此处使用标准 .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>

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

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

编号

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

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

列表项
列表项
列表项

[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 开始，Sass mixin 已被弃用。列表组项变体现在在 Sass 循环中覆盖其 CSS 变量。list-group-item-variant()

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

一个简单的默认列表组项
简单的主列表组项
简单的辅助列表组项
一个简单的成功列表组项
一个简单的危险清单组项
一个简单的警告列表组项
简单的信息列表组项
简单的灯光列表组项
一个简单的暗列表组项

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

对于链接和按钮

上下文类也适用于 for 和元素。请注意，此处添加了上一个示例中不存在的悬停样式。国家也得到了支持;应用它来指示上下文列表组项上的活动选择。.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 的复选框和单选放置在列表组项目中，并根据需要进行自定义。您可以在不带 s 的情况下使用它们，但请记住包含属性和值以供访问。<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>

您可以使用 on s 使整个列表组项可单击。.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 变量方法的一部分，列表组现在使用本地 CSS 变量来增强实时自定义。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。.list-group

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

家轮廓消息设置

与“主页”相关的段落中的一些占位符内容。还有更多内容，在这里只是用来填充和填充这个选项卡面板。在制作中，您显然会在这里拥有更多真实的内容。不仅仅是文本。真的，它可以是任何东西。文本、图像、表格。

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>

使用数据属性

只需在元素上指定或即可激活列表组导航，而无需编写任何 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`	Static 方法，允许您获取与 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

如果没有选项卡处于活动状态，则不会触发 and 事件。hide.bs.tabhidden.bs.tab

事件类型	描述
`hide.bs.tab`	当要显示新选项卡时，将触发此事件（因此将隐藏上一个活动选项卡）。使用和分别定位当前活动选项卡和即将激活的新选项卡。`event.targetevent.relatedTarget`
`hidden.bs.tab`	此事件在显示新选项卡后触发（因此隐藏了上一个活动选项卡）。使用和分别定位上一个活动选项卡和新的活动选项卡。`event.targetevent.relatedTarget`
`show.bs.tab`	此事件在选项卡显示时触发，但在显示新选项卡之前。使用和分别定位活动选项卡和上一个活动选项卡（如果可用）。`event.targetevent.relatedTarget`
`shown.bs.tab`	此事件在显示选项卡后在选项卡显示时触发。使用和分别定位活动选项卡和上一个活动选项卡（如果可用）。`event.targetevent.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
  })
})

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

List group 列表组

基本示例

活动项目

链接和按钮

冲洗

编号

水平

变种

对于链接和按钮

带徽章

自定义内容

列表组项标题

列表组项标题

列表组项标题

复选框和单选

CSS系统

变量

Sass 变量

Sass 混合

Sass 循环

JavaScript 行为

使用数据属性

通过 JavaScript

淡入淡出效果

方法

事件