Source

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

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

مثال أساسي

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

  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • موربي ليو ريسوس
  • Porta ac consectetur ac
  • الدهليز في إيروس
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

أضف .activeإلى a .list-group-itemللإشارة إلى التحديد النشط الحالي.

  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • موربي ليو ريسوس
  • Porta ac consectetur ac
  • الدهليز في إيروس
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

أضف .disabledإلى .list-group-itemلجعله يبدو معطلاً. لاحظ أن بعض العناصر التي تحتوي .disabledعلى ستتطلب أيضًا جافا سكريبت مخصصًا لتعطيل أحداث النقر الخاصة بهم تمامًا (على سبيل المثال ، الروابط).

  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • موربي ليو ريسوس
  • Porta ac consectetur ac
  • الدهليز في إيروس
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

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

كراس جوستو أوديو Dapibus ac facilisis في موربي ليو ريسوس Porta ac consectetur ac الدهليز في إيروس 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

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

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

دافق

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

  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • موربي ليو ريسوس
  • Porta ac consectetur ac
  • الدهليز في إيروس
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

أفقي

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

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

  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • موربي ليو ريسوس
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • موربي ليو ريسوس
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • موربي ليو ريسوس
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • موربي ليو ريسوس
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • كراس جوستو أوديو
  • Dapibus ac facilisis في
  • موربي ليو ريسوس
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

الفئات السياقية

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

  • Dapibus ac facilisis في
  • عنصر مجموعة قائمة أساسي بسيط
  • عنصر مجموعة قائمة ثانوي بسيط
  • عنصر مجموعة قائمة نجاح بسيط
  • عنصر مجموعة قائمة خطر بسيط
  • عنصر مجموعة قائمة تحذيرية بسيطة
  • عنصر مجموعة قائمة معلومات بسيط
  • عنصر مجموعة قائمة خفيف بسيط
  • عنصر مجموعة قائمة مظلمة بسيط
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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الدولة ؛ قم بتطبيقه للإشارة إلى تحديد نشط على عنصر مجموعة قائمة سياقية.

Dapibus ac facilisis في عنصر مجموعة قائمة أساسي بسيط عنصر مجموعة قائمة ثانوي بسيط عنصر مجموعة قائمة نجاح بسيط عنصر مجموعة قائمة خطر بسيط عنصر مجموعة قائمة تحذيرية بسيطة عنصر مجموعة قائمة معلومات بسيط عنصر مجموعة قائمة خفيف بسيط عنصر مجموعة قائمة مظلمة بسيط 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</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>
إيصال المعنى للتقنيات المساعدة

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

مع شارات

أضف شارات إلى أي عنصر مجموعة قائمة لإظهار الأعداد غير المقروءة والنشاط والمزيد بمساعدة بعض الأدوات المساعدة .

  • كراس جوستو أوديو14
  • Dapibus ac facilisis في2
  • موربي ليو ريسوس1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

محتوى مخصص

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

قائمة عنصر المجموعة
منذ 3 أيام

Donec id elit non mi porta gravida at eget metus. Maecenas Sed Diam eget risus varius blandit.

Donec id elit non mi porta.
قائمة عنصر المجموعة
منذ 3 أيام

Donec id elit non mi porta gravida at eget metus. Maecenas Sed Diam eget risus varius blandit.

Donec id elit non mi porta.
قائمة عنصر المجموعة
منذ 3 أيام

Donec id elit non mi porta gravida at eget metus. Maecenas Sed Diam eget risus varius blandit.

Donec id elit non mi porta. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

سلوك JavaScript

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

تمارين رياضية مؤقتة. Voluptate deserunt الجلوس sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit nisi ad non minim tempor sunt voluptate consectetur Practice id ut nulla. Ea et fugiat aliquip nostrud sunt incidunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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-toggle="list"عنصر أو عليه. استخدم سمات البيانات هذه في .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>

عبر JavaScript

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

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

يمكنك تنشيط عنصر قائمة فردي بعدة طرق:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third 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>

طُرق

علامة التبويب $ ()

ينشط عنصر عنصر قائمة وحاوية محتوى. يجب أن تحتوي علامة التبويب على عقدة حاوية data-targetأو تستهدفها في DOM.href

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab ("عرض")

يحدد عنصر القائمة المحدد ويظهر الجزء المرتبط به. يصبح أي عنصر قائمة آخر تم تحديده مسبقًا غير محدد ويتم إخفاء الجزء المرتبط به. يعود إلى المتصل قبل عرض جزء علامة التبويب (على سبيل المثال ، قبل shown.bs.tabوقوع الحدث).

$('#someListItem').tab('show')

الأحداث

عند إظهار علامة تبويب جديدة ، يتم تنشيط الأحداث بالترتيب التالي:

  1. hide.bs.tab(في علامة التبويب النشطة الحالية)
  2. show.bs.tab(في علامة التبويب التي سيتم عرضها)
  3. hidden.bs.tab(في علامة التبويب النشطة السابقة ، نفس علامة التبويب الخاصة hide.bs.tabبالحدث)
  4. shown.bs.tab(في علامة التبويب النشطة حديثًا المعروضة للتو ، نفس علامة التبويب الخاصة show.bs.tabبالحدث)

إذا لم تكن هناك علامة تبويب نشطة بالفعل ، فلن يتم تشغيل الأحداث hide.bs.tabو .hidden.bs.tab

نوع الحدث وصف
show.bs.tab يتم تشغيل هذا الحدث في علامة التبويب ، ولكن قبل ظهور علامة التبويب الجديدة. استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.
يظهر. bs.tab يتم تشغيل هذا الحدث في علامة التبويب بعد عرض علامة التبويب. استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.
علامة التبويب إخفاء يتم تشغيل هذا الحدث عند عرض علامة تبويب جديدة (وبالتالي يتم إخفاء علامة التبويب النشطة السابقة). استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة الحالية وعلامة التبويب الجديدة التي ستصبح نشطة ، على التوالي.
علامة التبويب المخفية يتم تشغيل هذا الحدث بعد عرض علامة تبويب جديدة (وبالتالي يتم إخفاء علامة التبويب النشطة السابقة). استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة السابقة وعلامة التبويب النشطة الجديدة ، على التوالي. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})