Daftar grup
Grup daftar adalah komponen yang fleksibel dan kuat untuk menampilkan serangkaian konten. Ubah dan perluas untuk mendukung hampir semua konten di dalamnya.
Contoh dasar
Grup daftar paling dasar adalah daftar tidak berurutan dengan item daftar dan kelas yang tepat. Bangun di atasnya dengan opsi yang mengikuti, atau dengan CSS Anda sendiri sesuai kebutuhan.
- Sebuah benda
- Barang kedua
- Item ketiga
- Item keempat
- Dan yang kelima
<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>
Item aktif
Tambahkan .active
ke a .list-group-item
untuk menunjukkan pilihan aktif saat ini.
- Barang aktif
- 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>
Item yang dinonaktifkan
Tambahkan .disabled
ke a .list-group-item
untuk membuatnya tampak dinonaktifkan. Perhatikan bahwa beberapa elemen dengan .disabled
juga akan memerlukan JavaScript khusus untuk sepenuhnya menonaktifkan peristiwa kliknya (mis., tautan).
- Item yang dinonaktifkan
- 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>
Tautan dan tombol
Gunakan <a>
s atau <button>
s untuk membuat item grup daftar yang dapat ditindaklanjuti dengan status melayang, dinonaktifkan, dan aktif dengan menambahkan .list-group-item-action
. Kami memisahkan kelas semu ini untuk memastikan grup daftar yang terbuat dari elemen non-interaktif (seperti <li>
s atau <div>
s) tidak memberikan keterjangkauan klik atau ketuk.
Pastikan untuk tidak menggunakan .btn
kelas standar di sini .
<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>
Dengan <button>
s, Anda juga dapat menggunakan disabled
atribut alih-alih .disabled
kelas. Sayangnya, <a>
s tidak mendukung atribut 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 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>
Menyiram
Tambahkan .list-group-flush
untuk menghapus beberapa batas dan sudut membulat untuk merender item grup daftar ujung-ke-ujung dalam wadah induk (mis., kartu).
- Sebuah benda
- Barang kedua
- Item ketiga
- Item keempat
- Dan yang kelima
<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>
Bernomor
Tambahkan .list-group-numbered
kelas pengubah (dan secara opsional gunakan <ol>
elemen) untuk memilih item grup daftar bernomor. Angka dihasilkan melalui CSS (sebagai lawan <ol>
dari gaya browser default) untuk penempatan yang lebih baik di dalam item grup daftar dan untuk memungkinkan penyesuaian yang lebih baik.
Angka dihasilkan oleh counter-reset
pada <ol>
, kemudian ditata dan ditempatkan dengan ::before
elemen semu pada <li>
dengan counter-increment
dan content
.
- Sebuah daftar item
- Sebuah daftar item
- Sebuah daftar item
<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>
Ini berfungsi dengan baik dengan konten khusus juga.
-
SubjudulKonten untuk item daftar
-
SubjudulKonten untuk item daftar
-
SubjudulKonten untuk item daftar
<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>
Horisontal
Tambahkan .list-group-horizontal
untuk mengubah tata letak item grup daftar dari vertikal ke horizontal di semua titik henti sementara. Atau, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl|xxl}
untuk membuat grup daftar horizontal mulai dari breakpoint min-width
. Saat ini grup daftar horizontal tidak dapat digabungkan dengan grup daftar flush.
ProTip: Ingin item grup daftar dengan lebar yang sama saat horizontal? Tambahkan .flex-fill
ke setiap item grup daftar.
- Sebuah benda
- Barang kedua
- Item ketiga
- Sebuah benda
- Barang kedua
- Item ketiga
- Sebuah benda
- Barang kedua
- Item ketiga
- Sebuah benda
- Barang kedua
- Item ketiga
- Sebuah benda
- Barang kedua
- Item ketiga
- Sebuah benda
- Barang kedua
- Item ketiga
<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>
Kelas kontekstual
Gunakan kelas kontekstual untuk menata item daftar dengan latar belakang dan warna stateful.
- Item grup daftar default sederhana
- Item grup daftar utama sederhana
- Item grup daftar sekunder sederhana
- Item grup daftar sukses sederhana
- Item grup daftar bahaya sederhana
- Item grup daftar peringatan sederhana
- Item grup daftar info sederhana
- Item grup daftar ringan sederhana
- Item grup daftar gelap sederhana
<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>
Kelas kontekstual juga berfungsi dengan .list-group-item-action
. Perhatikan penambahan gaya hover di sini tidak ada pada contoh sebelumnya. Juga didukung adalah .active
negara; terapkan untuk menunjukkan pilihan aktif pada item grup daftar kontekstual.
<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>
Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hidden
kelas.
Dengan lencana
Tambahkan lencana ke item grup daftar apa pun untuk menampilkan jumlah yang belum dibaca, aktivitas, dan lainnya dengan bantuan beberapa utilitas .
- Sebuah daftar item14
- Item daftar kedua2
- Item daftar ketiga1
<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>
Konten khusus
Tambahkan hampir semua HTML di dalamnya, bahkan untuk grup daftar tertaut seperti di bawah ini, dengan bantuan utilitas flexbox .
Daftar judul item grup
3 hari yang laluBeberapa konten placeholder dalam sebuah paragraf.
Dan beberapa cetakan kecil.Daftar judul item grup
3 hari yang laluBeberapa konten placeholder dalam sebuah paragraf.
Dan beberapa cetakan kecil yang diredam.Daftar judul item grup
3 hari yang laluBeberapa konten placeholder dalam sebuah paragraf.
Dan beberapa cetakan kecil yang diredam.<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>
Kotak centang dan radio
Tempatkan kotak centang dan radio Bootstrap di dalam item grup daftar dan sesuaikan sesuai kebutuhan. Anda dapat menggunakannya tanpa <label>
s, tetapi harap ingat untuk menyertakan aria-label
atribut dan nilai untuk aksesibilitas.
- Kotak centang pertama
- Kotak centang kedua
- Kotak centang ketiga
- Kotak centang keempat
- Kotak centang kelima
<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>
Dan jika Anda ingin <label>
s sebagai .list-group-item
area hit besar, Anda juga bisa melakukannya.
<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>
Kelancangan
Variabel
$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;
campuran
Digunakan dalam kombinasi dengan $theme-colors
untuk menghasilkan kelas varian kontekstual untuk .list-group-item
s.
@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;
}
}
}
}
Lingkaran
Loop yang menghasilkan kelas pengubah dengan list-group-item-variant()
mixin.
// 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);
}
Perilaku JavaScript
Gunakan plugin tab JavaScript—termasuk secara individual atau melalui file yang dikompilasi bootstrap.js
—untuk memperluas grup daftar kami untuk membuat panel konten lokal yang dapat ditabulasi.
<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>
Menggunakan atribut data
Anda dapat mengaktifkan navigasi grup daftar tanpa menulis JavaScript apa pun hanya dengan menentukan data-bs-toggle="list"
atau pada suatu elemen. Gunakan atribut data ini pada .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>
Melalui JavaScript
Aktifkan item daftar tabbable melalui JavaScript (setiap item daftar harus diaktifkan satu per satu):
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()
})
})
Anda dapat mengaktifkan item daftar individual dalam beberapa cara:
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
efek memudar
Untuk membuat panel tab memudar, tambahkan .fade
ke masing-masing .tab-pane
. Panel tab pertama juga harus .show
membuat konten awal terlihat.
<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>
Metode
constructor
Mengaktifkan elemen daftar item dan wadah konten. Tab harus memiliki a data-bs-target
atau href
penargetan simpul penampung di DOM.
<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>
menunjukkan
Memilih item daftar yang diberikan dan memperlihatkan panel terkaitnya. Item daftar lainnya yang sebelumnya dipilih menjadi tidak dipilih dan panel terkaitnya disembunyikan. Kembali ke pemanggil sebelum panel tab benar-benar ditampilkan (misalnya, sebelum shown.bs.tab
peristiwa terjadi).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
membuang
Menghancurkan tab elemen.
dapatkan Instance
Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Acara
Saat menampilkan tab baru, peristiwa diaktifkan dalam urutan berikut:
hide.bs.tab
(pada tab aktif saat ini)show.bs.tab
(pada tab yang akan ditampilkan)hidden.bs.tab
(pada tab aktif sebelumnya, sama dengan tabhide.bs.tab
acara)shown.bs.tab
(pada tab yang baru saja ditampilkan yang baru aktif, yang sama dengan untukshow.bs.tab
acara tersebut)
Jika tidak ada tab yang sudah aktif, peristiwa hide.bs.tab
dan hidden.bs.tab
tidak akan diaktifkan.
Jenis acara | Keterangan |
---|---|
show.bs.tab |
Acara ini diaktifkan pada tampilan tab, tetapi sebelum tab baru ditampilkan. Gunakan event.target dan event.relatedTarget untuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia). |
shown.bs.tab |
Acara ini diaktifkan pada tampilan tab setelah tab ditampilkan. Gunakan event.target dan event.relatedTarget untuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia). |
hide.bs.tab |
Acara ini diaktifkan ketika tab baru akan ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan event.target dan event.relatedTarget untuk menargetkan masing-masing tab aktif saat ini dan tab baru yang akan segera aktif. |
hidden.bs.tab |
Acara ini diaktifkan setelah tab baru ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan event.target dan event.relatedTarget untuk menargetkan tab aktif sebelumnya dan tab aktif baru, masing-masing. |
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
})
}