Bootstrap List Groups
مجموعات القائمة في BootStrap
ستتعلم في هذا الدرس عرض مجموعة من العناصر في صورة list groups وهي قائمة افقية أو رأسية باستخدام 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>
ملاحظة
- وبداخله عناصر 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
