목록 그룹
목록 그룹은 일련의 콘텐츠를 표시하기 위한 유연하고 강력한 구성 요소입니다. 그 안에 있는 거의 모든 콘텐츠를 지원하도록 수정하고 확장합니다.
기본 예
가장 기본적인 목록 그룹은 목록 항목과 적절한 클래스가 있는 정렬되지 않은 목록입니다. 다음 옵션을 사용하거나 필요에 따라 고유한 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
하여 .list-group-item
현재 활성 선택을 나타냅니다.
- 활성 항목
- A second item
- A third item
- A fourth item
- And a fifth one
<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
하려면 에 추가하십시오 . 가 있는 일부 요소 는 클릭 이벤트(예: 링크)를 완전히 비활성화하기 위해 사용자 정의 JavaScript도 필요합니다..list-group-item
.disabled
- 비활성화된 항목
- A second item
- A third item
- A fourth item
- And a fifth one
<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>
s 또는 <button>
s를 사용 하여 추가하여 호버, 비활성화 및 활성 상태 의 실행 가능한.list-group-item-action
목록 그룹 항목을 만듭니다 . 비대화형 요소(예: <li>
s 또는 <div>
s)로 구성된 목록 그룹이 클릭 또는 탭 어포던스를 제공하지 않도록 이러한 유사 클래스를 분리합니다.
여기 에서 표준 .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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
s를 사용 하면 클래스 대신 속성 <button>
을 사용할 수도 있습니다 . 슬프게도 s는 disabled 속성을 지원하지 않습니다.disabled
.disabled
<a>
<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 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>
로 스타일이 지정되고 배치 됩니다 .::before
<li>
counter-increment
content
- Cras Justo Odio
- Cras Justo Odio
- Cras Justo Odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
사용자 지정 콘텐츠에서도 잘 작동합니다.
-
소제목Cras Justo Odio
-
소제목Cras Justo Odio
-
소제목Cras Justo Odio
<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>
Cras justo odio
</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>
Cras justo odio
</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>
Cras justo odio
</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
. 현재 수평 목록 그룹은 플러시 목록 그룹과 결합할 수 없습니다.
ProTip: 수평일 때 동일한 너비의 목록 그룹 항목을 원하십니까? .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>
상황별 클래스
상황별 클래스를 사용하여 상태 저장 배경 및 색상으로 목록 항목의 스타일을 지정합니다.
- 간단한 기본 목록 그룹 항목
- 간단한 기본 목록 그룹 항목
- 간단한 보조 목록 그룹 항목
- 간단한 성공 목록 그룹 항목
- 간단한 위험 목록 그룹 항목
- 간단한 경고 목록 그룹 항목
- 간단한 정보 목록 그룹 항목
- 간단한 조명 목록 그룹 항목
- 간단한 다크리스트 그룹 항목
<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
. 이전 예에는 없는 여기에 호버 스타일이 추가되었습니다. 상태 도 지원됩니다 .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을 내부에 추가할 수 있습니다 .
<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="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
큰 히트 영역에 대해 <label>
s 를 원하면 그렇게 할 수도 있습니다..list-group-item
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
사스
변수
$list-group-color: $gray-900;
$list-group-bg: $white;
$list-group-border-color: rgba($black, .125);
$list-group-border-width: $border-width;
$list-group-border-radius: $border-radius;
$list-group-item-padding-y: $spacer * .5;
$list-group-item-padding-x: $spacer;
$list-group-item-bg-scale: -80%;
$list-group-item-color-scale: 40%;
$list-group-hover-bg: $gray-100;
$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: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;
믹신
s 에 대한 컨텍스트 변형 클래스$theme-colors
를 생성하기 위해 와 함께 사용됩니다 ..list-group-item
@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;
}
}
}
}
고리
list-group-item-variant()
믹스 인을 사용하여 수정자 클래스를 생성하는 루프입니다 .
// 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, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
자바스크립트 동작
탭 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를 통해 탭 가능 목록 항목 활성화(각 목록 항목을 개별적으로 활성화해야 함):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
다음과 같은 여러 방법으로 개별 목록 항목을 활성화할 수 있습니다.
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var 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>
행동 양식
constructor
목록 항목 요소 및 콘텐츠 컨테이너를 활성화합니다. 탭 에는 DOM 의 data-bs-target
또는 대상 컨테이너 노드가 있어야 합니다.href
<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>
<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>
<script>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
show
주어진 목록 항목을 선택하고 관련 창을 표시합니다. 이전에 선택한 다른 목록 항목은 선택 취소되고 연결된 창이 숨겨집니다. 탭 창이 실제로 표시 되기 전(예: shown.bs.tab
이벤트가 발생하기 전) 호출자에게 돌아갑니다.
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
요소의 탭을 파괴합니다.
getInstance
DOM 요소와 연결된 탭 인스턴스를 가져올 수 있는 정적 메서드
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
DOM 요소와 연결된 탭 인스턴스를 가져오거나 초기화되지 않은 경우 새 탭 인스턴스를 만들 수 있는 정적 메서드
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
이벤트
새 탭을 표시할 때 이벤트는 다음 순서로 실행됩니다.
hide.bs.tab
(현재 활성 탭에서)show.bs.tab
(표시할 탭에서)hidden.bs.tab
hide.bs.tab
(이전 활성 탭에서 이벤트 와 동일한 탭 )shown.bs.tab
show.bs.tab
(새로 활성화된 방금 표시된 탭에서 이벤트 와 동일한 탭 )
활성화된 탭이 없으면 hide.bs.tab
및 hidden.bs.tab
이벤트가 실행되지 않습니다.
이벤트 유형 | 설명 |
---|---|
show.bs.tab |
이 이벤트는 탭 표시 시 발생하지만 새 탭이 표시되기 전에 발생합니다. event.target 및 를 사용 event.relatedTarget 하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다. |
shown.bs.tab |
이 이벤트는 탭이 표시된 후 탭이 표시될 때 발생합니다. event.target 및 를 사용 event.relatedTarget 하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다. |
hide.bs.tab |
이 이벤트는 새 탭이 표시될 때 발생합니다(따라서 이전 활성 탭이 숨겨짐). event.target 및 를 사용 event.relatedTarget 하여 각각 현재 활성 탭과 곧 활성화될 새 탭을 대상으로 지정합니다. |
hidden.bs.tab |
이 이벤트는 새 탭이 표시된 후에 시작됩니다(따라서 이전 활성 탭이 숨겨짐). event.target 및 를 사용 event.relatedTarget 하여 각각 이전 활성 탭과 새 활성 탭을 대상으로 지정합니다. |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}