في هذا الدرس 6تصفّح المواضيع
- 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.
HTML
<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>يمكن عمل list group مرقمة كالاتي:
- اولا نقوم بانشاء <ol> قائمة مرتبة ونضيف لها كلاس list-group وكلاس list-group-numbered.
- ثانيا نضيف كلاس list-group-item لكل <li> داخل <ol>.
Numbered List Group
عمل list group numbered مجموعة قائمة مرقمة.
HTML
<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>- يستخدم كلاس active داخل اي عنصر في list group لاعطاءه خلفية مميزة باللون الازرق.
- يستخدم كلاس disabled لالغاء تفعيل اي عنصر في list group ليصبح غير قابلا للتفاعل مع cursor actions مثل click و hover.
Active and Disabled Items
مثال على تفعيل وتعطيل بعض العناصر داخل list-group.
HTML
<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>يضاف كلاس list-group-flush بجوار كلاس list-group ويستخدم لازالة بعض borders والحواف المستديرة ويترك فقط خط اسفل كل list ماعدا العنصر الاخير.
Remove Borders
ازالة بعض الاطارات والحواف المستديرة من اي list group.
HTML
<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>يضاف كلاس list-group-horizontal بجانب كلاس list-group لجعل مجموعة القائمة تظهر بشكل افقي اي في سطر واحد.
Horizontal List Group
مثال على كلاس list-group-horizontal.
HTML
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
</ul>- يمكن استخدامات contextual classes كلاسات سياقية لتغيير خلفية اي list item داخل list group.
- الكلاسات السياقية مع list group تكتب *-list-group-item حيث * هي احد هذه القيم ( primary - secondary - info - success - danger - warning - dark - light )
Contextual Classes
استخدام الكلاسات السياقية مع list group.
HTML
<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>رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.