האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
Check
in English

רשימה גרופּע

רשימה גרופּעס זענען אַ פלעקסאַבאַל און שטאַרק קאָמפּאָנענט פֿאַר ווייַזנדיק אַ סעריע פון ​​אינהאַלט. מאָדיפיצירן און פאַרברייטערן זיי צו שטיצן כּמעט קיין אינהאַלט ין.

אויף דעם בלאַט

יקערדיק בייַשפּיל

די מערסט יקערדיק רשימה גרופּע איז אַן אַנאָרדערד רשימה מיט רשימה זאכן און די געהעריק קלאסן. בויען אויף עס מיט די פאלגענדע אָפּציעס, אָדער מיט דיין אייגענע 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צו אַ .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צו אַ .list-group-itemצו מאַכן עס דערשייַנען פאַרקריפּלט. באַמערקונג אַז עטלעכע עלעמענטן .disabledוועט אויך דאַרפן מנהג דזשאַוואַסקריפּט צו גאָר דיסייבאַל זייער קליק געשעענישן (למשל לינקס).

  • א פאַרקריפּלט נומער
  • א צװײט ן נומער
  • א דריטער נומער
  • א פערטע זאך
  • און א פינפטע
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>ס טאָן ניט שטיצן די פאַרקריפּלט אַטריביוט.

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.

  1. א רשימה נומער
  2. א רשימה נומער
  3. א רשימה נומער
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>

די אַרבעט אויך גרויס מיט מנהג אינהאַלט.

  1. סובהעדינג
    אינהאַלט פֿאַר רשימה נומער
    14
  2. סובהעדינג
    אינהאַלט פֿאַר רשימה נומער
    14
  3. סובהעדינג
    אינהאַלט פֿאַר רשימה נומער
    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 ין, אפילו פֿאַר לינגקט רשימה גרופּעס ווי דער אונטן, מיט די הילף פון פלעקסבאָקס יוטילאַטיז .

רשימה גרופּע נומער כעדינג
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>

טשעקקבאָקסעס און ראַדיאָס

שטעלן באָאָטסטראַפּ ס טשעקקבאָקסעס און ראַדיאָס אין רשימה גרופּע זאכן און קאַסטאַמייז ווי דארף. איר קענען נוצן זיי אָן <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

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, רשימה גרופּעס איצט נוצן היגע CSS וועריאַבאַלז .list-groupפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

  --#{$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};

סאָס וועריאַבאַלז

$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);
}

דזשאַוואַסקריפּט נאַטור

ניצן די קוויטל דזשאַוואַסקריפּט פּלוגין-אַרייַננעמען עס ינדיווידזשואַלי אָדער דורך די קאַמפּיילד 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>

ניצן דאַטן אַטראַביוץ

איר קענען אַקטאַווייט אַ רשימה גרופּע נאַוויגאַציע אָן שרייבן קיין דזשאַוואַסקריפּט דורך פשוט ספּעציפיצירן 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>

דורך דזשאַוואַסקריפּט

געבן טאַבבאַבלע רשימה נומער דורך דזשאַוואַסקריפּט (יעדער רשימה נומער דאַרף זיין אַקטיווייטיד ינדיווידזשואַלי):

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>

מעטהאָדס

אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז

אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .

זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע .

אַקטאַווייץ דיין אינהאַלט ווי אַ קוויטל עלעמענט.

איר קענען מאַכן אַ קוויטל בייַשפּיל מיט די קאָנסטרוקטאָר, למשל:

const bsTab = new bootstrap.Tab('#myTab')
מעטאָד באַשרייַבונג
dispose דיסטרויז אַן עלעמענט ס קוויטל.
getInstance סטאַטיק אופֿן וואָס אַלאַוז איר צו באַקומען די קוויטל בייַשפּיל פֿאַרבונדן מיט אַ DOM עלעמענט, איר קענען נוצן עס ווי דאָס: bootstrap.Tab.getInstance(element).
getOrCreateInstance סטאַטיק אופֿן וואָס קערט אַ קוויטל בייַשפּיל פֿאַרבונדן צו אַ DOM עלעמענט אָדער שאַפֿן אַ נייַע אין פאַל עס איז נישט יניטיאַלייזד. איר קענען נוצן עס ווי דאָס: bootstrap.Tab.getOrCreateInstance(element).
show סאַלעקץ די געגעבן קוויטל און ווייזט זייַן פֿאַרבונדן שויב. קיין אנדערע קוויטל וואָס איז געווען פריער אויסגעקליבן ווערט אַנסעלעקטעד און זיין פ��רבונדן שויב איז פאַרבאָרגן. קערט צו די קאַללער איידער די קוויטל שויב איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.tabגעשעעניש אַקערז).

געשעענישן

ווען איר ווייַזן אַ נייַע קוויטל, די געשעענישן לויפן אין די פאלגענדע סדר:

  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געשעענישן וועט נישט זיין פייערד.

געשעעניש טיפּ באַשרייַבונג
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
  })
})