اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
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لپاره 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>

معیوب شوي توکي

.disabledA ته اضافه کړئ .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. موږ دا pseudo- ټولګیو جلا کوو ترڅو ډاډ ترلاسه کړو چې د غیر متقابل عناصرو څخه جوړ شوي لیست ګروپونه (لکه <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>s د معلولیت ځانګړتیا ملاتړ نه کوي.

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>

سی ایس ایس

متغیرات

په v5.2.0 کې اضافه شوی

د بوټسټریپ د پرمختللې CSS متغیر تګلارې د یوې برخې په توګه ، د لیست ګروپونه اوس ځایی 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;

مکسین

د s لپاره د متناسب متغیر ټولګیو$theme-colors رامینځته کولو سره په ترکیب کې کارول کیږي ..list-group-item

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

لوپ

لوپ چې د list-group-item-variant()مکسین سره د ترمیم کونکي ټولګي رامینځته کوي.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

جاواسکریپټ چلند

د ټب جاواسکریپټ پلگ ان وکاروئ — دا په انفرادي ډول یا د مرتب شوي 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>

میتودونه

غیر متناسب میتودونه او لیږدونه

ټولې API میتودونه غیر متزلزل دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته بیرته راځي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .

د نورو معلوماتو لپاره زموږ جاواسکریپټ اسناد وګورئ .

ستاسو مینځپانګه د ټب عنصر په توګه فعالوي.

تاسو کولی شئ د جوړونکي سره د ټب مثال رامینځته کړئ ، د مثال په توګه:

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