in English

لست ګروپ

د لیست ګروپونه د مینځپانګو د لړۍ د ښودلو لپاره انعطاف وړ او قوي برخه ده. په دننه کې د هر ډول مینځپانګې په اړه د ملاتړ لپاره یې ترمیم او پراخ کړئ.

په دې پاڼه کې

Basic example

ترټولو بنسټیز لیست ګروپ د لیست توکو او مناسبو ټولګیو سره یو غیر منظم لیست دی. په دې باندې د هغه اختیارونو سره جوړ کړئ چې تعقیبوي، یا د اړتیا سره سم ستاسو د خپل 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>

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

.disabledA ته اضافه کړئ .list-group-itemترڅو دا غیر فعال ښکاري . په یاد ولرئ چې ځینې عناصر .disabledبه دودیز جاوا سکریپټ ته هم اړتیا ولري ترڅو د دوی کلیک پیښې په بشپړ ډول غیر فعال کړي (د بیلګې په توګه لینکونه).

یو معیوب شوی توکي
دوهم توکي
دریم توکي
څلورم توکي
او پنځم یو

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

د اوسني لینک توکي دوهم لینک توکي دریم لینک توکي څلورم لینک توکي د غیر فعال لینک توکي

<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>د معلولیت ځانګړتیا ملاتړ نه کوي.

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

یو لیست توکي
یو لیست توکي
یو لیست توکي

<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

<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د هر لیست ګروپ توکي ته اضافه کړئ .

یو شی
دوهم توکي
دریم توکي

یو شی
دوهم توکي
دریم توکي

یو شی
دوهم توکي
دریم توکي

یو شی
دوهم توکي
دریم توکي

یو شی
دوهم توکي
دریم توکي

یو شی
دوهم توکي
دریم توکي

<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 اضافه کړئ، حتی د تړل شوي لیست ګروپونو لپاره لکه لاندې یو، د فلیکس بکس اسانتیاو په مرسته .

د ګروپ توکي سرلیک لیست کړئ

3 ورځې وړاندې

په پراګراف کې ځینې ځای لرونکي مینځپانګې.

او یو څه کوچني چاپ.

د ګروپ توکي سرلیک لیست کړئ

3 ورځې وړاندې

په پراګراف کې ځینې ځای لرونکي مینځپانګې.

او ځینې خاموش شوي کوچني چاپ.

د ګروپ توکي سرلیک لیست کړئ

3 ورځې وړاندې

په پراګراف کې ځینې ځای لرونکي مینځپانګې.

او ځینې خاموش شوي کوچني چاپ.

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

لومړی چک بکس
دوهم چک بکس
دریم چیک باکس
څلورم چک بکس
پنځم چک بکس

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

مکسین

د 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فایل له لارې شامل کړئ — د محلي مینځپانګو د ټب وړ پینلونو رامینځته کولو لپاره زموږ د لیست ګروپ پراخولو لپاره.

د کور پروفایل پیغامونو ترتیبات

د "کور" پورې اړوند په پراګراف کې ځینې ځای لرونکي مینځپانګې. او یو څه نور مینځپانګه ، دلته یوازې د دې ټب پینل ډکولو او ډکولو لپاره کارول کیږي. په تولید کې، تاسو به په ښکاره ډول دلته ډیر اصلي مینځپانګه ولرئ. او نه یوازې متن. دا کیدای شي هر څه وي، واقعا. متن، انځورونه، بڼې.

د "پراګراف" پورې اړوند په پراګراف کې ځینې ځای لرونکي مینځپانګې. او یو څه نور مینځپانګه ، دلته یوازې د دې ټب پینل ډکولو او ډکولو لپاره کارول کیږي. په تولید کې، تاسو به په ښکاره ډول دلته ډیر اصلي مینځپانګه ولرئ. او نه یوازې متن. دا کیدای شي هر څه وي، واقعا. متن، انځورونه، بڼې.

د "پیغامونو" پورې اړوند پراګراف کې ځینې ځای لرونکي مینځپانګې. او یو څه نور مینځپانګه ، دلته یوازې د دې ټب پینل ډکولو او ډکولو لپاره کارول کیږي. په تولید کې، تاسو به په ښکاره ډول دلته ډیر اصلي مینځپانګه ولرئ. او نه یوازې متن. دا کیدای شي هر څه وي، واقعا. متن، انځورونه، بڼې.

د "ترتیباتو" پورې اړوند په پراګراف کې ځینې ځای لرونکي مینځپانګې. او یو څه نور مینځپانګه ، دلته یوازې د دې ټب پینل ډکولو او ډکولو لپاره کارول کیږي. په تولید کې، تاسو به په ښکاره ډول دلته ډیر اصلي مینځپانګه ولرئ. او نه یوازې متن. دا کیدای شي هر څه وي، واقعا. متن، انځورونه، بڼې.

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

د جاواسکریپټ له لارې

د جاواسکریپټ له لارې د میز وړ لیست توکي فعال کړئ (هر لیست توکي باید په انفرادي ډول فعال شي):

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

د لیست توکي عنصر او د مینځپانګې کانټینر فعالوي. ټب باید په DOM کې د کانټینر نوډ په نښه کولو data-bs-targetیا هم ولري.href

<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

پیښې

کله چې یو نوی ټب وښایاست، پیښې په لاندې ترتیب کې اوریدل کیږي:

hide.bs.tab(په اوسني فعال ټب کې)
show.bs.tab(په ښودل شوي ټب کې)
hidden.bs.tab(په پخواني فعال ټب کې، د hide.bs.tabپیښې لپاره ورته ورته)
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
  })
}