קבוצת רשימה

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

בעמוד זה

דוגמה בסיסית

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

פריטים פעילים

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

פריטים מושבתים

הוסף .disabledל-a .list-group-itemכדי שזה ייראה מושבת. שים לב שרכיבים מסוימים עם .disabledידרשו גם JavaScript מותאם אישית כדי להשבית לחלוטין את אירועי הקליקים שלהם (למשל, קישורים).

פריט מושבת
פריט שני
פריט שלישי
פריט רביעי
ואחד חמישי

html

<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 כאן .

פריט הקישור הנוכחי פריט קישור שני פריט קישור שלישי פריט קישור רביעי פריט קישור מושבת

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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

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

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>

מְמוּספָּר

הוסף את .list-group-numberedמחלקת השינוי (ואפשר להשתמש <ol>באלמנט) כדי להצטרף לפריטי קבוצת רשימה ממוספרת. מספרים נוצרים באמצעות CSS (בניגוד <ol>לסגנון ברירת המחדל של הדפדפן) לצורך מיקום טוב יותר בתוך פריטי קבוצת רשימה וכדי לאפשר התאמה אישית טובה יותר.

מספרים נוצרים על ידי counter-resetעל <ol>, ולאחר מכן מעוצבים וממוקמים עם ::beforeפסאודו-אלמנט על <li>עם counter-incrementו content.

פריט רשימה
פריט רשימה
פריט רשימה

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 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לכל פריט קבוצתי ברשימה.

חפץ
פריט שני
פריט שלישי

חפץ
פריט שני
פריט שלישי

חפץ
פריט שני
פריט שלישי

חפץ
פריט שני
פריט שלישי

חפץ
פריט שני
פריט שלישי

חפץ
פריט שני
פריט שלישי

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>

שיעורים קונטקסטואליים

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

פריט קבוצתי ברירת מחדל פשוט
פריט קבוצתי ראשוני פשוט
פריט קבוצתי משני פשוט
פריט קבוצתי פשוט ברשימת הצלחה
פריט קבוצתי פשוט של רשימת סכנות
פריט קבוצתי פשוט של רשימת אזהרה
פריט קבוצתי רשימת מידע פשוט
פריט קבוצתי קל פשוט
פריט קבוצתי פשוט ברשימה חשוכה

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>

שיעורי הקשר עובדים גם עם .list-group-item-action. שימו לב להוספת סגנונות הרחף כאן שאינם קיימים בדוגמה הקודמת. כמו כן נתמכת .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 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 .

כותרת פריט קבוצה ברשימה

לפני 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-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תכונה וערך עבור נגישות.

תיבת סימון ראשונה
תיבת סימון שנייה
תיבת סימון שלישית

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>

אתה יכול להשתמש .stretched-linkב- <label>s כדי להפוך את כל פריט קבוצת הרשימה לניתן ללחוץ.

תיבת סימון ראשונה
תיבת סימון שנייה
תיבת סימון שלישית

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

משתנים

נוסף בגרסה 5.2.0

כחלק מגישת משתני ה-CSS המתפתחת של Bootstrap, קבוצות רשימות משתמשות כעת במשתני 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:                  $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הקובץ המהודר - כדי להרחיב את קבוצת הרשימות שלנו ליצירת חלוניות ניתנות לכרטיסיות של תוכן מקומי.

בית פּרוֹפִיל הודעות הגדרות

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

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`	שיטה סטטית המאפשרת לך לקבל את מופע הכרטיסיות המשויך לרכיב 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האירוע)

אם אף כרטיסייה לא הייתה פעילה, אז האירועים 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
  })
})