قائمة المستخدمين هي عنصر واجهة شائع يستخدم لعرض قائمة المستخدمين في النظام. في Bootstrap، يمكنك استخدام خيارات التخطيط والتصميم المتنوعة لتصميم مظهر قائمة المستخدمين الخاصة بك.

كيفية إنشاء قوائم المستخدمين باستخدام HTML وCSS

إحدى الطرق لإنشاء قائمة مستخدمين في Bootstrap هي استخدام العنصرين

و
• لإنشاء قائمة غير مرتبة بالعناصر المستخدمة. يمكنك بعد ذلك استخدام نظام شبكة Bootstrap للتحكم في تخطيط القائمة، وتطبيق فئات مختلفة على عناصر
  و
  • لتصميمها وفقًا لاحتياجاتك.

    على سبيل المثال، يمكنك استخدام فئتي .list-group و.list-group-item لإنشاء قائمة مستخدمين بمظهر يشبه البطاقة، أو فئتي .table و.table-row لإنشاء تخطيط أكثر جدولية .

    يمكنك أيضًا استخدام فئات الأدوات المساعدة في Bootstrap لتصميم عناصر القائمة، مثل فئة .font-weight-bold لجعل أسماء المستخدمين غامقة، أو فئة .text-muted لجعل نص تفاصيل المستخدم باللون الرمادي.

    ]

    إليك مثال لقائمة مستخدمين بسيطة تم تنفيذها باستخدام Bootstrap:
    

    • Ricky ([email protected])
    • Neha ([email protected])
    • Alex ([email protected])

    هناك النصائح التالية –

    1. استخدم نقاط التوقف سريعة الاستجابة في Bootstrap للتأكد من أن قائمة المستخدمين الخاصة بك تبدو جيدة على أحجام الشاشات المختلفة. على سبيل المثال، يمكنك استخدام الفئتين .d-sm-flex و.flex-sm-column لجعل عناصر قائمة المستخدم مكدسة عموديًا على الشاشات الصغيرة، والفئة .d-none لإخفاء عناصر معينة على أحجام شاشات معينة.
    2. يمكنك استخدام مكونات ترقيم الصفحات في Bootstrap للسماح للمستخدمين بتصفح قوائم كبيرة من المستخدمين. على سبيل المثال، يمكنك استخدام فئة .pagination لإنشاء شريط ترقيم الصفحات، وفئتي .page-item و.page-link لتصميم روابط ترقيم الصفحات الفردية.
    3. يمكنك استخدام عناصر التحكم في نموذج Bootstrap للسماح للمستخدمين بتصفية قائمة المستخدمين أو فرزها. على سبيل المثال، يمكنك استخدام فئة .form-control لتصميم مدخلات البحث، أو فئة .custom-select لتصميم قائمة منسدلة لتحديد ترتيب الفرز.
    4. يمكنك استخدام مكونات كائن الوسائط في Bootstrap لعرض الصور الرمزية للمستخدم أو الوسائط الغنية الأخرى إلى جانب أسماء المستخدمين وتفاصيلهم. على سبيل المثال، يمكنك استخدام الفئتين .media و .media-body لإنشاء كائن وسائط، والفئة .mr-3 لإعطاء الصورة الرمزية بعض المساحة من النص.
    5. فكر في استخدام خيارات التخصيص في Bootstrap لتخصيص مظهر قائمة المستخدمين الخاصة بك بشكل أكبر وفقًا لاحتياجاتك. على سبيل المثال، يمكنك استخدام متغير Sass $list-group-item-color لتغيير لون خلفية عناصر القائمة، أو متغيرات $list-group-item-color و$list-group-item-text-color لتغيير لون الخلفية لعناصر القائمة. التحكم في لون النص.