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>

موارد غیر فعال

.disabledبه a اضافه کنید .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>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شوند.

یک آیتم لیست
یک آیتم لیست
یک آیتم لیست

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-links استفاده کنید <label>تا کل آیتم گروه لیست را قابل کلیک کنید.

اول چک باکس
چک باکس دوم
چک باکس سوم

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()mixin تولید می کند.

// 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`وقوع رویداد) به تماس گیرنده برمی گردد.

مناسبت ها

هنگام نمایش یک برگه جدید، رویدادها به ترتیب زیر فعال می شوند:

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