قائمة مجمعة (List group)

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

في هذه الصفحة

مثال أساسي

أبسط مجموعة قوائم هي قائمة غير مرتبة مع عناصر قائمة والفئات المناسبة. قم بالبناء عليها باستخدام الخيارات التالية، أو باستخدام CSS الخاص بك حسب الحاجة.

An item
A second item
A third item
A fourth item
And a fifth one

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 إلى .list-group-item للإشارة إلى التحديد النشط الحالي.

An active item
A second item
A third item
A fourth item
And a fifth one

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>

الروابط والأزرار

استخدم الـ <a> أو الـ <button> لإنشاء عناصر مجموعة قوائم قابلة للتفاعل مع حالات التحويم (hover)، والتعطيل (disabled)، والنشاط (active) عن طريق إضافة .list-group-item-action. لقد قمنا بفصل هذه الفئات الوهمية (pseudo-classes) لضمان أن مجموعات القوائم المكونة من عناصر غير تفاعلية (مثل <li> أو <div>) لا توفر إيحاءً بالنقر أو اللمس.

اجعل مثيلات .list-group-item-action تبدو معطلة عن طريق إضافة .disabled و aria-disabled="true" لإبلاغ التقنيات المساعدة بأن العنصر معطل. قد تحتاج إلى JavaScript إضافية لتعطيل الروابط والأزرار بشكل كامل.

تأكد من عدم استخدام الفئات .btn القياسية هنا.

The current link item A second link item A third link item A fourth link item A disabled link item

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 href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>

مع الـ <button>، يمكنك أيضاً استخدام الخاصية disabled بدلاً من الفئة .disabled . للأسف، الـ <a> لا تدعم الخاصية disabled.

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>

مسطح (Flush)

أضف .list-group-flush لإزالة بعض الحدود والزوايا المستديرة لعرض عناصر مجموعة القوائم من الحافة إلى الحافة في حاوية أب (مثل الـ cards).

An item
A second item
A third item
A fourth item
And a fifth one

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>

مرقمة (Numbered)

أضف الفئة المعدلة .list-group-numbered (ويمكنك اختيارياً استخدام عنصر <ol>) لتفعيل عناصر مجموعة القوائم المرقمة. يتم إنشاء الأرقام عبر CSS (على عكس تنسيق المتصفح الافتراضي لـ <ol>) لتحقيق وضعية أفضل داخل عناصر مجموعة القوائم وللسماح بتخصيص أفضل.

يتم إنشاء الأرقام بواسطة counter-reset على الـ <ol>، ثم يتم تنسيقها ووضعها باستخدام عنصر زائف ::before على الـ <li> مع counter-increment و content.

A list item
A list item
A list item

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>

تعمل هذه العناصر بشكل رائع مع المحتوى المخصص أيضاً

Subheading
Content for list item
14
Subheading
Content for list item
14
Subheading
Content for list item
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 text-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 text-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 text-bg-primary rounded-pill">14</span>
  </li>
</ol>

أفقي (Horizontal)

أضف .list-group-horizontal لتغيير تخطيط عناصر مجموعة القوائم من رأسي إلى أفقي عبر جميع نقاط التوقف (breakpoints). بدلاً من ذلك، اختر بديلاً متوافقاً مع الشاشات (Responsive) .list-group-horizontal-{sm|md|lg|xl|xxl} لجعل مجموعة القوائم أفقية بدءاً من الـ min-width الخاصة بنقطة التوقف تلك. حالياً لا يمكن دمج مجموعات القوائم الأفقية مع مجموعات القوائم المسطحة (flush).

نصيحة احترافية: هل تريد عناصر مجموعة قوائم متساوية العرض عندما تكون أفقية؟ أضف .flex-fill إلى كل عنصر في مجموعة القوائم.

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

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>

البدائل (Variants)

تنبيه! بدءاً من الإصدار 5.3.0، أصبح المزج (mixin) الخاص بـ list-group-item-variant() في الـ Sass مستبعداً (deprecated). الآن يتم تجاوز متغيرات CSS الخاصة ببدائل عناصر مجموعة القوائم في Sass loop.

استخدم الفئات (classes) السياقية لتنسيق عناصر القائمة بخلفية ولون يعبران عن حالة معينة.

A simple default list group item
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

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>

للروابط والأزرار

تعمل الفئات (classes) السياقية أيضاً مع .list-group-item-action لعناصر <a> و <button>. لاحظ إضافة أنماط التحويم (hover) هنا والتي لم تكن موجودة في المثال السابق. كما أن الحالة .active مدعومة أيضاً؛ قم بتطبيقها للإشارة إلى تحديد نشط على عنصر مجموعة قوائم سياقي.

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

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>

نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.

مع الشارات (badges)

أضف الشارات (badges) إلى أي عنصر من عناصر مجموعة القوائم لإظهار أعداد غير المقروءة، والنشاط، وأكثر من ذلك بمساعدة بعض الأدوات المساعدة (utilities).

A list item 14
A second list item 2
A third list item 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 text-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 text-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 text-bg-primary rounded-pill">1</span>
  </li>
</ul>

محتوى مخصص

أضف أي HTML تقريباً بداخلها، حتى بالنسبة لمجموعات القوائم المرتبطة مثل تلك الموجودة أدناه، بمساعدة أدوات الـ flexbox المساعدة (flexbox utilities).

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

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-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">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-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
</div>

مربعات الاختيار (Checkboxes و radios)

ضع مربعات الاختيار وأزرار الراديو الخاصة بالـ Bootstrap داخل عناصر مجموعة القوائم وقم بتخصيصها حسب الحاجة. يمكنك استخدامها بدون <label>، ولكن يرجى تذكر تضمين سمة aria-label وقيمة من أجل إمكانية الوصول.

First checkbox
Second checkbox
Third checkbox

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>

First radio
Second radio
Third radio

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

يمكنك استخدام .stretched-link على الـ <label> لجعل عنصر مجموعة القوائم بالكامل قابلاً للنقر.

First checkbox
Second checkbox
Third checkbox

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)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

كجزء من نهج الـ CSS variables المتطور في Bootstrap، تستخدم مجموعات القوائم الآن متغيرات CSS محلية على .list-group لتعزيز التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر الـ Sass، لذا فإن تخصيص الـ Sass لا يزال مدعوماً أيضاً.

scss/_list-group.scss

--#{$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)

scss/_variables.scss

$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$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:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

دمج/مزج الـ (Sass mixins)

v5.3.0 مستبعد في الإصدار

scss/mixins/_list-group.scss

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

حلقات الـ (Sass loops)

حلقة تقوم بتوليد الفئات (classes) المعدلة مع تجاوز متغيرات CSS.

scss/_list-group.scss

// 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 in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

سلوك الـ (JavaScript behavior)

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

Home Profile Messages Settings

Some placeholder content in a paragraph relating to "Home". 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 "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 effect)

لجعل لوحة التبويبات تتلاشى عند الظهور، أضف .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>

الطرق، الأساليب (Methods)

جميع دوال الـ API هي دوال غير متزامنة (asynchronous) وتبدأ عملية انتقال (transition). وهي تعود إلى المستدعي بمجرد بدء عملية الانتقال، ولكن قبل انتهائها. بالإضافة إلى ذلك، سيتم تجاهل أي استدعاء للدالة على مكوّن يمر حالياً بعملية انتقال. تعرف على المزيد في مستندات JavaScript الخاصة بنا.

يُفعّل محتواك كعنصر تبويب (tab).

يمكنك إنشاء مثيل تبويب باستخدام المنشئ (constructor)، على سبيل المثال:

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

الأسلوب	الوصف
`dispose`	يقوم بإزالة التبويب الخاص بالعنصر.
`getInstance`	دالة ثابتة (Static method) تتيح لك الحصول على مثيل التبويب المرتبط بعنصر DOM، يمكنك استخدامها على النحو التالي: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	دالة ثابتة (Static method) تعيد مثيل تبويب مرتبط بعنصر DOM أو تنشئ مثيلاً جديداً في حال لم يتم تهيئته. يمكنك استخدامها على النحو التالي: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	يختار التبويب المحدد ويعرض اللوحة المرتبطة به. أي تبويب آخر كان محدداً سابقاً يصبح غير محدد ويتم إخفاء اللوحة المرتبطة به. يعود إلى المستدعي قبل أن يتم عرض لوحة التبويب فعلياً (أي قبل وقوع حدث `shown.bs.tab`).

الأحداث (Events)

عند عرض تبويب جديد، يتم إطلاق الأحداث بالترتيب التالي:

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