الدرس السابع: القوائم (Lists) في Bootstrap
القوائم تُعد من العناصر الأساسية التي تساهم في تنظيم وتنسيق المحتوى داخل صفحات الويب. في Bootstrap، يُمكنك استخدام فئات متنوعة لتنسيق القوائم بشكل مرن وجذاب. من خلال هذا الدرس، سنتعرف على كيفية استخدام الأدوات المتاحة في Bootstrap لتنسيق القوائم بشكل أفضل، مع توضيح كيفية بناء قوائم متجاوبة، وكذلك قوائم منسدلة تضيف إلى تجربة المستخدم.
1. تنسيق القوائم باستخدام list-group
في Bootstrap، تُستخدم فئة list-group لإنشاء قوائم منسقة تحتوي على مجموعة من العناصر التي تظهر بشكل مرتب وجذاب. هذه القوائم يمكن أن تحتوي على نصوص أو روابط أو أي نوع آخر من العناصر التي تريد عرضها بشكل متسلسل.
أ. كيفية استخدام list-group
لفهم كيفية استخدام list-group، ابدأ بتحديد القائمة باستخدام العنصر <ul> أو <div>، ثم استخدم فئة .list-group لتنسيق القائمة. بعد ذلك، يمكن إضافة عناصر القائمة باستخدام العنصر <li> مع الفئة .list-group-item.
مثال عملي:
<ul class="list-group">
<li class="list-group-item">العنصر الأول</li>
<li class="list-group-item">العنصر الثاني</li>
<li class="list-group-item">العنصر الثالث</li>
</ul>
في هذا المثال، تم إنشاء قائمة من 3 عناصر باستخدام list-group.
ب. تخصيص الألوان باستخدام list-group-item
تقدم Bootstrap خيارات لتخصيص ألوان العناصر داخل القائمة باستخدام فئات الألوان الجاهزة. يمكن استخدام الفئات مثل:
.list-group-item-primary(للون رئيسي).list-group-item-secondary(للون ثانوي).list-group-item-success(للون النجاح).list-group-item-danger(للون التحذير)
مثال عملي:
<ul class="list-group">
<li class="list-group-item list-group-item-primary">عنصر باللون الرئيسي</li>
<li class="list-group-item list-group-item-success">عنصر بنجاح</li>
<li class="list-group-item list-group-item-danger">عنصر بتحذير</li>
</ul>
في هذا المثال، تم تخصيص ألوان مختلفة لكل عنصر داخل القائمة.
ج. استخدام الروابط في القائمة
إذا كنت ترغب في أن يكون عناصر القائمة روابط قابلة للنقر، يمكنك استخدام العنصر <a> مع فئة .list-group-item. يُمكن أن تجعل هذه العناصر تظهر كروابط تفاعلية مع إضافة فئة .list-group-item-action.
مثال عملي:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">الرابط الأول</a>
<a href="#" class="list-group-item list-group-item-action">الرابط الثاني</a>
<a href="#" class="list-group-item list-group-item-action">الرابط الثالث</a>
</div>
في هذا المثال، تم تحويل عناصر القائمة إلى روابط تفاعلية باستخدام .list-group-item-action.
د. قائمة مع عناوين وفواصل
يمكنك إضافة فواصل بين عناصر القائمة باستخدام فئة .dropdown-divider أو إضافة عناوين باستخدام .dropdown-header.
مثال عملي:
<div class="list-group">
<h6 class="dropdown-header">عنوان القائمة</h6>
<a href="#" class="list-group-item list-group-item-action">العنصر الأول</a>
<a href="#" class="list-group-item list-group-item-action">العنصر الثاني</a>
<div class="dropdown-divider"></div>
<a href="#" class="list-group-item list-group-item-action">العنصر الثالث</a>
</div>
هنا أضفنا عنوانًا وفاصلًا بين العناصر لتقديم تجربة مستخدم أفضل.
2. تنسيق القوائم الأفقية باستخدام list-inline
في بعض الأحيان، قد ترغب في عرض القوائم بشكل أفقي بدلًا من العمودي. يوفر Bootstrap فئة list-inline لهذا الغرض، حيث تحول القائمة إلى شكل أفقي مع عرض العناصر بجانب بعضها البعض.
مثال عملي:
<ul class="list-inline">
<li class="list-inline-item">العنصر الأول</li>
<li class="list-inline-item">العنصر الثاني</li>
<li class="list-inline-item">العنصر الثالث</li>
</ul>
في هذا المثال، يتم عرض العناصر بجانب بعضها البعض بفضل فئة list-inline. هذا مفيد عند بناء قوائم التنقل أو عندما ترغب في أن تظهر العناصر بشكل أفقي.
استخدامات القوائم الأفقية
- القوائم التي تحتوي على روابط مثل قوائم التنقل.
- عرض قائمة قصيرة من الخيارات مثل أزرار التصفية أو التصنيفات.
- قوائم تحتوي على مجموعة من الصور أو الأيقونات التي تريد ترتيبها أفقيًا.
3. إنشاء قوائم منسدلة باستخدام dropdown
القوائم المنسدلة تُعد من الخصائص الأساسية التي تضيف التفاعلية إلى الموقع. مع Bootstrap، يمكنك إنشاء قوائم منسدلة بسهولة باستخدام فئات dropdown.
أ. قائمة منسدلة بسيطة
لإنشاء قائمة منسدلة، نحتاج إلى عناصر محددة:
- عنصر يحمل فئة
.dropdownلتحديد القائمة المنسدلة. - زر أو رابط مع الفئة
.dropdown-toggleلتفعيل القائمة المنسدلة عند النقر عليه. - قائمة تحتوي على العناصر التي تريد عرضها في القائمة المنسدلة.
مثال عملي:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
القائمة المنسدلة
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">العنصر الأول</a></li>
<li><a class="dropdown-item" href="#">العنصر الثاني</a></li>
<li><a class="dropdown-item" href="#">العنصر الثالث</a></li>
</ul>
</div>
هنا، عند النقر على الزر الذي يحمل فئة .dropdown-toggle، ستظهر القائمة المنسدلة مع العناصر المدرجة فيها.
ب. إضافة فواصل وعناوين داخل القوائم المنسدلة
في بعض الأحيان، تحتاج إلى إضافة فواصل بين العناصر أو إضافة عناوين لتقسيم القوائم المنسدلة إلى أقسام مختلفة. Bootstrap يدعم هذه الخاصية باستخدام فئات dropdown-divider و dropdown-header.
مثال عملي:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
قائمة منسدلة متقدمة
</button>
<ul class="dropdown-menu">
<h6 class="dropdown-header">قسم رئيسي</h6>
<li><a class="dropdown-item" href="#">العنصر الأول</a></li>
<li><a class="dropdown-item" href="#">العنصر الثاني</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">العنصر الثالث</a></li>
</ul>
</div>
تم هنا إضافة فاصل بين العناصر ودمج عنوان لتوضيح القسم الذي ينتمي إليه كل عنصر داخل القائمة المنسدلة.
4. إنشاء قوائم متداخلة
يمكنك إضافة قوائم فرعية داخل القوائم باستخدام list-group أو dropdown. هذا يوفر لك طريقة لتنظيم المحتوى بشكل هرمي، مما يساعد في بناء قوائم معقدة وأكثر تنوعًا.
مثال عملي باستخدام list-group:
<ul class="list-group">
<li class="list-group-item">العنصر الأول</li>
<li class="list-group-item">
العنصر الثاني
<ul class="list-group mt-2">
<li class="list-group-item">العنصر الفرعي 1</li>
<li class="list-group-item">العنصر الفرعي 2</li>
</ul>
</li>
<li class="list-group-item">العنصر الثالث</li>
</ul>
تم هنا إضافة قائمة متداخلة داخل العنصر الثاني.
5. القوائم المتجاوبة
تُعد القوائم في Bootstrap متجاوبة بشكل افتراضي، مما يعني أنها ستظهر بشكل مناسب على جميع الشاشات. إذا كنت تستخدم فئات الشبكة مثل .container أو .row، فستتمكن من تنظيم القوائم على الشاشة الكبيرة وتعديل حجمها بناءً على حجم الشاشة.
الخلاصة
القوائم في Bootstrap تُعد من الأدوات المهمة التي تُسهم في تنظيم المحتوى وتوفير تجربة مستخدم مميزة. بفضل فئات مثل list-group و list-inline، يمكنك إنشاء قوائم متنوعة ومتجاوبة تلبي احتياجات تصميم واجهات المستخدم الحديثة. كما أن القوائم المنسدلة تمنحك فرصة لإضافة تفاعلية للموقع. لا تنسَ تخصيص القوائم باستخدام الألوان والعناصر المتداخلة لضمان تقديم تجربة فريدة للمستخدم.
