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

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

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

مثال أساسي

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

عنصر
عنصر ثان
بند ثالث
بند رابع
وخامس

لغة البرمجة

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

أول راديو
الراديو الثاني
الراديو الثالث

لغة البرمجة

<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-linkon <label>لجعل عنصر مجموعة القائمة بالكامل قابلاً للنقر.

مربع الاختيار الأول
خانة الاختيار الثانية
مربع الاختيار الثالث

لغة البرمجة

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

متغيرات ساس

$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 (يجب تنشيط كل عنصر قائمة على حدة):

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 غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .

راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .

ينشط المحتوى الخاص بك كعنصر علامة تبويب.

يمكنك إنشاء مثيل جدولة مع المُنشئ ، على سبيل المثال:

const bsTab = new bootstrap.Tab('#myTab')

طريقة	وصف
`dispose`	يدمر علامة تبويب عنصر.
`getInstance`	الطريقة الثابتة التي تسمح لك بالحصول على مثيل علامة التبويب المرتبط بعنصر DOM ، يمكنك استخدامه على النحو التالي `bootstrap.Tab.getInstance(element)`:.
`getOrCreateInstance`	طريقة Static تُرجع مثيل علامة تبويب مرتبطًا بعنصر 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
  })
})