Bootstrap

Bootstrap List Groups
مجموعات القائمة في BootStrap

ستتعلم في هذا الدرس عرض مجموعة من العناصر في صورة list groups وهي قائمة افقية أو رأسية باستخدام bootstrap.

التاريخ

04 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1186

المواضيع

6
الشروحات chevron_left Bootstrap List Groups chevron_left Bootstrap

Bootstrap List Groups
مجموعات القائمة في BootStrap

</> Bootstrap List Groups
مجموعات القائمة في bootstrap

  • bootstrap list group هي مجموعة من تنسيقات bootstrap تستخدم لعرض مجموعة من العناصر في شكل قائمة راسية او افقية.
  • كلاسات list group في bootstrap تقوم بتغيير تنسيق عنصر container الحاوية ليظهر على هيئة جدول مكون من عمود واحد.
  • لعمل list group نقوم باضافة كلاس list-group لعنصر القائمة او container الحاوية بشكل عام, ثم نضيف كلاس list-group-item لكل عنصر داخل القائمة.
  • يقوم list group باخذ العرض الكامل للعنصر الاب.
List Group

طريقة استخدام كلاس list-group و list-group-item.

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

</> BootStrap Numbered List Groups
مجموعات القوائم المرقمة في bootstrap

يمكن عمل list group مرقمة كالاتي:

  • اولا نقوم بانشاء <ol> قائمة مرتبة ونضيف لها كلاس list-group وكلاس list-group-numbered.
  • ثانيا نضيف كلاس list-group-item لكل <li> داخل <ol>.
Numbered List Group

عمل list group numbered مجموعة قائمة مرقمة.

<ol class="list-group list-group-numbered">
   <li class="list-group-item">First item</li>
   <li class="list-group-item">Second item</li>
   <li class="list-group-item">Third item</li>
</ol>

</> BootStrap List Group Active and Disabled Items
العناصر النشطة وغير النشطة داخل مجموعة القائمة في bootstrap

  • يستخدم كلاس active داخل اي عنصر في list group لاعطاءه خلفية مميزة باللون الازرق.
  • يستخدم كلاس disabled لالغاء تفعيل اي عنصر في list group ليصبح غير قابلا للتفاعل مع cursor actions مثل click و hover.
Active and Disabled Items

مثال على تفعيل وتعطيل بعض العناصر داخل list-group.

<ul class="list-group">
   <li class="list-group-item active text-white">Active item</li>
   <li class="list-group-item diabled">Second item</li>
   <li class="list-group-item">Third item</li>
</ul>

</> BootStrap List Groups Remove Borders
ازالة الحدود في مجموعات القائمة في bootstrap

يضاف كلاس list-group-flush بجوار كلاس list-group ويستخدم لازالة بعض borders والحواف المستديرة ويترك فقط خط اسفل كل list ماعدا العنصر الاخير.

Remove Borders

ازالة بعض الاطارات والحواف المستديرة من اي list group.

<div class="list-group list-group-flush">
   <a class="list-group-item" href="#">An item</a>
   <a class="list-group-item" href="#">A second item</a>
</div>
ملاحظة
لاحظ انه يمكن استخدام عنصر div بدلا من
    وبداخله عناصر link لعمل list group كما هو موضح في المثال السابق.

</> BootStrap Horizontal List Groups
مجموعات القائمة الافقية في bootstrap

يضاف كلاس list-group-horizontal بجانب كلاس list-group لجعل مجموعة القائمة تظهر بشكل افقي اي في سطر واحد.

Horizontal List Group

مثال على كلاس list-group-horizontal.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
</ul>

</> BootStrap List Groups Contextual Classes
الكلاسات السياقية مع مجموعات القوائم في bootstrap

  • يمكن استخدامات contextual classes كلاسات سياقية لتغيير خلفية اي list item داخل list group.
  • الكلاسات السياقية مع list group تكتب *-list-group-item حيث * هي احد هذه القيم ( primary - secondary - info - success - danger - warning - dark - light )
Contextual Classes

استخدام الكلاسات السياقية مع list group.

<ul class="list-group">
   <li class="list-group-item list-group-item-success">Success item</li>
   <li class="list-group-item list-group-item-secondary">Secondary item</li>
</ul>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.