مجموعة القائمة

تعد مجموعات القوائم مكونًا مرنًا وقويًا لعرض سلسلة من المحتوى. قم بتعديلها وتوسيعها لدعم أي محتوى بداخلها.

على هذه الصفحة

مثال أساسي

مجموعة القائمة الأساسية هي قائمة غير مرتبة تحتوي على عناصر قائمة وفئات مناسبة. قم بالبناء عليه بالخيارات التالية ، أو باستخدام 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>

العناصر المعطلة

أضف .disabledإلى .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. نحن نفصل بين هذه الفئات الزائفة للتأكد من أن مجموعات القوائم المكونة من عناصر غير تفاعلية (مثل <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-reseton the <ol>، ثم يتم تصميمها ووضعها مع ::beforeعنصر زائف في <li>with 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. لا يمكن حاليًا دمج مجموعات القوائم الأفقية مع مجموعات القوائم المتدفقة.

ProTip: هل تريد عناصر مجموعة قائمة متساوية العرض عندما تكون أفقية؟ أضف .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 داخل ، حتى لمجموعات القوائم المرتبطة مثل المجموعة أدناه ، بمساعدة أدوات flexbox المساعدة .

قائمة عنصر المجموعة

منذ 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>

مربعات الاختيار وأجهزة الراديو

ضع مربعات الاختيار وأجهزة الراديو في Bootstrap ضمن عناصر مجموعة القائمة وقم بتخصيصها حسب الحاجة. يمكنك استخدامها بدون <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>أن تكون .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;

الخلطات

يُستخدم مع $theme-colorsلإنشاء فئات المتغيرات السياقية لـ .list-group-items.

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

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

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

عقدة

الحلقة التي تولد أصناف المُعدِّل مع list-group-item-variant()المزيج.

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

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

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

سلوك JavaScript

استخدم ملحق JavaScript الخاص بعلامة التبويب - قم بتضمينه بشكل فردي أو من خلال bootstrap.jsالملف المترجم - لتوسيع مجموعة قائمتنا لإنشاء أجزاء قابلة للجدولة من المحتوى المحلي.

مسكن الملف الشخصي رسائل إعدادات

بعض محتوى العنصر النائب في فقرة تتعلق بـ "الصفحة الرئيسية". وبعض المحتوى الإضافي ، يُستخدم هنا فقط لملء لوحة علامة التبويب هذه وملءها. في الإنتاج ، من الواضح أنه سيكون لديك المزيد من المحتوى الحقيقي هنا. وليس مجرد نص. يمكن أن يكون أي شيء حقا. نص ، صور ، أشكال.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

استخدام سمات البيانات

يمكنك تنشيط تصفح مجموعة القائمة دون كتابة أي JavaScript بمجرد تحديد data-bs-toggle="list"عنصر أو عليه. استخدم سمات البيانات هذه في .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

عبر JavaScript

تمكين عنصر قائمة قابل للجدولة عبر JavaScript (يجب تنشيط كل عنصر قائمة على حدة):

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

ينشط عنصر عنصر قائمة وحاوية محتوى. يجب أن تحتوي علامة التبويب على عقدة حاوية data-bs-targetأو تستهدفها في DOM.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

Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialized

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Events

When showing a new tab, the events fire in the following order:

hide.bs.tab (on the current active tab)
show.bs.tab (on the to-be-shown tab)
hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, the hide.bs.tab and hidden.bs.tab events will not be fired.

Event type	Description
`show.bs.tab`	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`shown.bs.tab`	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`hide.bs.tab`	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
`hidden.bs.tab`	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.

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