उपयोगकर्ता सूची एक सामान्य इंटरफ़ेस तत्व है जिसका उपयोग सिस्टम में उपयोगकर्ताओं की सूची प्रदर्शित करने के लिए किया जाता है। बूटस्ट्रैप में, आप अपनी उपयोगकर्ता सूची की उपस्थिति को डिज़ाइन करने के लिए विभिन्न लेआउट और स्टाइलिंग विकल्पों का उपयोग कर सकते हैं।

एचटीएमएल और सीएसएस का उपयोग करके उपयोगकर्ता सूचियां कैसे बनाएं

बूटस्ट्रैप में उपयोगकर्ता सूची बनाने का एक तरीका उपयोग की गई वस्तुओं की एक अव्यवस्थित सूची बनाने के लिए

और
• तत्वों का उपयोग करना है। फिर आप सूची के लेआउट को नियंत्रित करने के लिए बूटस्ट्रैप के ग्रिड सिस्टम का उपयोग कर सकते हैं, और अपनी आवश्यकताओं के अनुसार उन्हें स्टाइल करने के लिए
  और
  • तत्वों में विभिन्न कक्षाएं लागू कर सकते हैं।

    उदाहरण के लिए, आप कार्ड जैसी दिखने वाली उपयोगकर्ता सूची बनाने के लिए .list-group और .list-group-आइटम क्लास का उपयोग कर सकते हैं, या अधिक सारणीबद्ध लेआउट बनाने के लिए .table और .table-row क्लास का उपयोग कर सकते हैं। .

    आप सूची आइटमों को स्टाइल करने के लिए बूटस्ट्रैप की उपयोगिता कक्षाओं का भी उपयोग कर सकते हैं, जैसे उपयोगकर्ता नामों को बोल्ड बनाने के लिए .font-weight-bold क्लास, या उपयोगकर्ता विवरण टेक्स्ट को ग्रे बनाने के लिए .text-म्यूटेड क्लास।

    यहां बूटस्ट्रैप का उपयोग करके कार्यान्वित एक सरल उपयोगकर्ता सूची का एक उदाहरण दिया गया है:
    

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

    निम्नलिखित युक्तियाँ हैं -

    1. यह सुनिश्चित करने के लिए बूटस्ट्रैप के प्रतिक्रियाशील ब्रेकप्वाइंट का उपयोग करें कि आपकी उपयोगकर्ता सूची विभिन्न स्क्रीन आकारों पर अच्छी दिखे। उदाहरण के लिए, आप उपयोगकर्ता सूची आइटम को छोटी स्क्रीन पर लंबवत रूप से स्टैक करने के लिए .d-sm-flex और .flex-sm-column वर्गों का उपयोग कर सकते हैं, और कुछ स्क्रीन आकारों पर कुछ तत्वों को छिपाने के लिए .d-none वर्ग का उपयोग कर सकते हैं।
    2. उपयोगकर्ताओं को उपयोगकर्ताओं की बड़ी सूचियों के माध्यम से ब्राउज़ करने की अनुमति देने के लिए आप बूटस्ट्रैप के पेजिनेशन घटकों का उपयोग कर सकते हैं। उदाहरण के लिए, आप पेजिनेशन बार बनाने के लिए .पेगिनेशन क्लास का उपयोग कर सकते हैं, और अलग-अलग पेजिनेशन लिंक को स्टाइल करने के लिए .पेज-आइटम और .पेज-लिंक क्लास का उपयोग कर सकते हैं।
    3. आप उपयोगकर्ताओं को उपयोगकर्ता सूची को फ़िल्टर या सॉर्ट करने की अनुमति देने के लिए बूटस्ट्रैप के फॉर्म नियंत्रण का उपयोग कर सकते हैं। उदाहरण के लिए, आप खोज इनपुट को स्टाइल करने के लिए .form-control क्लास का उपयोग कर सकते हैं, या सॉर्ट ऑर्डर चुनने के लिए ड्रॉपडाउन मेनू को स्टाइल करने के लिए .custom-select क्लास का उपयोग कर सकते हैं।
    4. आप उपयोगकर्ता नाम और विवरण के साथ उपयोगकर्ता अवतार या अन्य समृद्ध मीडिया प्रदर्शित करने के लिए बूटस्ट्रैप के मीडिया ऑब्जेक्ट घटकों का उपयोग कर सकते हैं। उदाहरण के लिए, आप मीडिया ऑब्जेक्ट बनाने के लिए .मीडिया और .मीडिया-बॉडी क्लास का उपयोग कर सकते हैं, और अवतार छवि को टेक्स्ट से कुछ स्थान देने के लिए .mr-3 क्लास का उपयोग कर सकते हैं।
    5. अपनी उपयोगकर्ता सूची की उपस्थिति को अपनी आवश्यकताओं के अनुरूप बनाने के लिए बूटस्ट्रैप के अनुकूलन विकल्पों का उपयोग करने पर विचार करें। उदाहरण के लिए, आप सूची आइटमों की पृष्ठभूमि का रंग बदलने के लिए $list-group-item-color Sass वेरिएबल का उपयोग कर सकते हैं, या $list-group-item-color और $list-group-item-text-color वेरिएबल का उपयोग कर सकते हैं। पाठ का रंग नियंत्रित करें.