बूटस्ट्रैप के साथ ड्रॉपडाउन मेनू कैसे बनाएं

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

ड्रॉपडाउन मेनू विशेष रूप से तब उपयोगी होता है जब आपके पास बहुत सारे लिंक या कार्य होते हैं, लेकिन उन सभी को एक साथ प्रदर्शित करने के लिए पृष्ठ पर पर्याप्त स्थान नहीं होता है।

आमतौर पर, ड्रॉपडाउन के लिए थोड़ी जावास्क्रिप्ट की आवश्यकता होती है।

यदि आपने अभी तक इसे सीखना शुरू नहीं किया है या बस एक त्वरित समाधान चाहते हैं, तो बूटस्ट्रैप एकदम उपयुक्त है।

बूटस्ट्रैप क्या है?

आपने शायद बहुत बार इधर-उधर फेंका हुआ शब्द सुना होगा, लेकिन बूटस्ट्रैप क्या है?

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

बूटस्ट्रैप में कुछ घटकों पर एक मानकीकृत स्टाइल लागू किया जाता है जो अक्सर निर्मित होते हैं, जैसे बटन तत्व, बटन समूह और नेविगेशन बार। इसका मतलब है कि हम कोड की कई पंक्तियों को बार-बार लिखने के बजाय कुछ पूर्वनिर्धारित कीवर्ड का उपयोग करके उन सभी शैलियों को लागू कर सकते हैं।

यह निरंतरता के साथ बहुत मदद करता है क्योंकि बड़े अनुप्रयोगों पर काम करने वाले कई डेवलपर्स की एक टीम को समान शैलियों को लागू करने के बारे में चिंता करने की आवश्यकता नहीं होती है। सभी शैलियों को ढांचे में परिभाषित किया गया है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

बूटस्ट्रैप सेट करना

बूटस्ट्रैप का उपयोग करने के लिए, हमें अपनी HTML संरचना में कोड की कुछ पंक्तियाँ जोड़नी होंगी।

हम सबसे तेज़ और सरल सेटअप के लिए बूटस्ट्रैप सीडीएन का उपयोग करने जा रहे हैं।

सबसे पहले, हमें एक उचित HTML5 टेम्पलेट की आवश्यकता है, जो आधुनिक कोड संपादकों में आसानी से किया जा सकता है। VSCode में, बस टाइप करें! और HTML5 दस्तावेज़ संरचना प्राप्त करने के लिए एंटर या टैब दबाएं जो इस तरह दिखता है:

   <शीर्षक>दस्तावेज़ 

अब, टैग के अंदर, निम्नलिखित पंक्तियों को किसी अन्य स्टाइलशीट के ऊपर पेस्ट करें:

 

 बूटस्ट्रैप हुड के नीचे कुछ जावास्क्रिप्ट पुस्तकालयों पर निर्भर करता है, इसलिए हमें समापन  टैग से ठीक पहले निम्नलिखित  

हमें बस इतना ही सेटअप चाहिए। अब हम अपने प्रोजेक्ट को बूटस्ट्रैप करने के लिए तैयार हैं।

बूटस्ट्रैप का उपयोग

बूटस्ट्रैप की शक्ति का उपयोग इसके कीवर्ड्स को HTML टैग्स के वर्गों के रूप में उपयोग करके किया जाता है। इसका उपयोग करके, आप बिना CSS फ़ाइल बनाये भी अपने पेज को पूरी तरह से स्टाइल कर सकते हैं!

उदाहरण के लिए, यहां एक साधारण बटन समूह है:

 बटन 1 button 2 बटन 3 बटन 4 बटन 5 <बटन class="btn btn-light">बटन 6 बटन 7 बटन 8 <बटन वर्ग ="बीटीएन बीटीएन-चेतावनी">बटन 9 

और नतीजा:

हमने बूटस्ट्रैप के सभी प्रीसेट रंगों के साथ एक बटन समूह बनाया है (इसे म्यूट कर दिया गया है क्योंकि यह टेक्स्ट के लिए आरक्षित है)।

अब ड्रॉपडाउन पर चलते हैं।

बूटस्ट्रैप ड्रॉपडाउन, विभिन्न तरीके

बूटस्ट्रैप के पुराने संस्करणों में, हमें विशेष रूप से ड्रॉपडाउन के लिए टैग का उपयोग करना पड़ता था। चूंकि संस्करण 4 टैग भी स्वीकार किए जाते हैं।

लिंक और बटन पर एक नोट:

लिंक का उपयोग केवल नेविगेशन उद्देश्यों के लिए किया जाना चाहिए। चाहे वर्तमान पृष्ठ के भीतर, या उपयोगकर्ता को किसी भिन्न पृष्ठ पर भेजने के लिए, लेकिन एक लिंक का एकमात्र कार्य नेविगेशन होना चाहिए।

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

किसी भी प्रकार की JavaScript क्लिक-संबंधित क्रियाएँ बटनों के साथ की जानी चाहिए।

साथ ही, लिंक्स को केवल एंटर की से ही एक्सेस किया जा सकता है, जबकि बटन को एंटर या स्पेस से एक्सेस किया जा सकता है, जिसे एक्सेसिबिलिटी के उद्देश्यों के लिए ध्यान में रखना महत्वपूर्ण है।

किसी भी स्थिति में, डेटा-टॉगल ="ड्रॉपडाउन"

विशेषता काम करने के लिए आवश्यक है।

बटन के साथ ड्रॉपडाउन

Button menu