דלג לתוכן הראשי דלג לניווט במסמכים
in English

קבוצת רשימה

קבוצות רשימות הן רכיב גמיש וחזק להצגת סדרת תוכן. שנה והרחיב אותם כדי לתמוך כמעט בכל תוכן שבתוכו.

דוגמה בסיסית

קבוצת הרשימות הבסיסית ביותר היא רשימה לא מסודרת עם פריטי רשימה והכיתות המתאימות. בנה על זה עם האפשרויות הבאות, או עם 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>

השתמש ב- <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>

עם <button>s, אתה יכול גם לעשות שימוש disabledבתכונה במקום .disabledבמחלקה. למרבה הצער, <a>לא תומכים בתכונה 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>

סומק

הוסף .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.

  1. Cras justo odio
  2. Cras justo odio
  3. 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>

אלה עובדים נהדרים גם עם תוכן מותאם אישית.

  1. כּוֹתֶרֶת מִשְׁנֶה
    Cras justo odio
    14
  2. כּוֹתֶרֶת מִשְׁנֶה
    Cras justo odio
    14
  3. כּוֹתֶרֶת מִשְׁנֶה
    Cras justo odio
    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>
      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. נכון לעכשיו , לא ניתן לשלב קבוצות רשימות אופקיות עם קבוצות רשימות סומק.

פרוטיפ: רוצה פריטי קבוצת רשימה ברוחב שווה כשהם אופקיים? הוסף .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>

תוכן מותאם אישית

הוסף כמעט כל HTML בתוכו, אפילו עבור קבוצות רשימות מקושרות כמו זו שלמטה, בעזרת כלי השירות של flexbox .

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

מיקסינס

משמש בשילוב עם $theme-colorsליצירת מחלקות הווריאציות ההקשריות עבור .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;
      }
    }
  }
}

לוּלָאָה

לולאה שיוצרת את מחלקות השינוי עם 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

השתמש בתוסף הכרטיסייה 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 (יש להפעיל כל פריט רשימה בנפרד):

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

מפעיל רכיב פריט רשימה ומכל תוכן. ל-Tab צריך להיות צומת מיקוד data-bs-targetאו hrefמיקוד לצומת מכיל ב-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>

הופעה

בוחר את פריט הרשימה הנתון ומציג את החלונית המשויכת לו. כל פריט אחר ברשימה שנבחר בעבר יבוטל והחלונית המשויכת לו מוסתרת. חוזר למתקשר לפני שחלונית הכרטיסיות הוצגה בפועל (לדוגמה, לפני shown.bs.tabשהאירוע מתרחש).

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

להיפטר

הורס לשונית של אלמנט.

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

אירועים

בעת הצגת כרטיסייה חדשה, האירועים יופעלו בסדר הבא:

  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לא יופעלו.

סוג אירוע תיאור
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
  })
}