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

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

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

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

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

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

आपने शायद इस शब्द को कई बार सुना होगा, लेकिन बूटस्ट्रैप क्या है?

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

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

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

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

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

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

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

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

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />

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