2011 में, ट्विटर ने बूटस्ट्रैप फ्रेमवर्क पेश किया। तब से, इस सीएसएस ढांचे ने दो प्रमुख पुनर्लेखन देखे हैं, जिसमें सबसे हालिया एक (बूटस्ट्रैप 3) 2013 में जारी किया गया था। बूटस्ट्रैप 3 ने मोबाइल-प्रथम दृष्टिकोण को लागू करके सीएसएस पुस्तकालय को बदल दिया जिसने ढांचे को पूरी तरह उत्तरदायी छोड़ दिया।
2022 तक, बूटस्ट्रैप संस्करण पांच पर है और यह सबसे लोकप्रिय फ्रंटएंड फ्रेमवर्क में से एक है। इसमें पूर्वनिर्मित घटकों की एक विस्तृत सूची और जावास्क्रिप्ट प्लगइन्स का एक प्रभावशाली संग्रह है। इस लेख में, आप सीखेंगे कि बूटस्ट्रैप का उपयोग कैसे करें और इसकी सुविधाओं का अधिकतम लाभ उठाएं।
अपने प्रोजेक्ट में बूटस्ट्रैप इंस्टाल करना
आपके प्रोजेक्ट में बूटस्ट्रैप का उपयोग करने के तीन तरीके हैं। आप सीएसएस और जावास्क्रिप्ट फाइलों को डाउनलोड और होस्ट कर सकते हैं, एनपीएम का उपयोग करके इसे अपने प्रोजेक्ट में इंस्टॉल कर सकते हैं, या अपने प्रोजेक्ट में उपयुक्त सीडीएन लिंक कॉपी और पेस्ट कर सकते हैं।
सीडीएन दृष्टिकोण के साथ, आपको अपनी एचटीएमएल फाइल के हेड टैग में किसी अन्य सीएसएस लिंक से पहले बूटस्ट्रैप लिंक रखना याद रखना होगा।
कुछ बूटस्ट्रैप घटकों में कार्यात्मक गतिविधियाँ होती हैं, जैसे बटन टॉगल करना और स्थिति निर्धारण जिसके लिए जावास्क्रिप्ट और पॉपर स्क्रिप्ट के आयात की आवश्यकता होती है। इसलिए, यदि आप किसी कार्यात्मक घटक का उपयोग करना चाहते हैं, तो आपको अपनी HTML फ़ाइल में स्क्रिप्ट टैग भी जोड़ना होगा।
चूंकि बूटस्ट्रैप एक मोबाइल-फर्स्ट तकनीक है, व्यूपोर्ट <मेटा> टैग उत्तरदायी डिजाइन में सहायता करेगा। अपने प्रोजेक्ट में बूटस्ट्रैप का उपयोग करने का एक आसान तरीका बूटस्ट्रैप के स्टार्टर टेम्पलेट को कॉपी करना है।
बूटस्ट्रैप के साथ एक वेबसाइट बनाना
जब आप एक नई वेबसाइट बना रहे हों, तो सबसे पहले आपको जिस चीज पर विचार करना चाहिए, वह है लेआउट। उसके बाद, आप बटन और टाइपोग्राफी जैसे अन्य घटकों पर जा सकते हैं।
बूटस्ट्रैप कंटेनर क्लास
बूटस्ट्रैप कंटेनर क्लास पैड आपके वेबपेज पर तत्वों को समाहित और संरेखित करता है। यदि आप बूटस्ट्रैप के डिफ़ॉल्ट ग्रिड का उपयोग करने की योजना बना रहे हैं, तो आपको बूटस्ट्रैप के कंटेनर वर्ग का भी उपयोग करना होगा। तीन प्रकार के कंटेनर वर्ग हैं; कंटेनर, कंटेनर-तरल पदार्थ, और कंटेनर- {ब्रेकपॉइंट}। कंटेनर वर्ग डिफ़ॉल्ट कंटेनर है; यह उत्तरदायी है और प्रत्येक बूटस्ट्रैप छह ब्रेकप्वाइंट पर एक निश्चित-चौड़ाई है।
उपरोक्त कोड को अपनी मौजूदा HTML फ़ाइल के मुख्य भाग में सम्मिलित करने से आपका वेबपृष्ठ उत्तरदायी बन जाएगा, और यह आपके वेबपृष्ठ के प्रत्येक पक्ष पर पैडिंग भी बनाएगा।
बूटस्ट्रैप ग्रिड सिस्टम
बूटस्ट्रैप का ग्रिड एक बारह-स्तंभ प्रणाली का उपयोग करता है जो पंक्ति और कॉल ग्रिड कक्षाओं के साथ-साथ कंटेनर वर्ग पर निर्भर करता है। प्रत्येक पंक्ति में बारह कॉलम होते हैं, और कोई भी तत्व इनमें से एक या अधिक कॉलम में फैल सकता है। कॉलम वर्ग इंगित करेगा कि तत्व को कितने कॉलम पर कब्जा करना चाहिए। उदाहरण के लिए, col-2 वर्ग का उपयोग करने वाला एक तत्व दो स्तंभों में फैला होगा, col-3 वर्ग का उपयोग करने वाला एक तत्व तीन स्तंभों में फैला होगा, और आगे भी।
बूटस्ट्रैप ग्रिड सिस्टम फ्लेक्सबॉक्स मॉड्यूल पर आधारित है। यदि केवल दो कॉलम एक पंक्ति में हैं, तो वे आपस में समान रूप से स्थान विभाजित करेंगे। गटर क्लास बूटस्ट्रैप के संरचनात्मक तत्वों में से एक है, और यह ग्रिड सिस्टम में प्रत्येक कॉलम के बीच की दूरी को नियंत्रित करता है। प्रत्येक ग्रिड कॉलम में दोनों तरफ 12px की पैडिंग होती है।
ऊपर की छवि में एक स्पष्ट अंतर स्तंभों के आकार का है। आमतौर पर, एक पंक्ति में दो (या अधिक) कॉलम समान मात्रा में स्थान घेरते हैं जब तक कि आप स्पष्ट रूप से अन्यथा नहीं बताते।
ऊपर दिए गए HTML कोड में col-sm-4 वर्ग यह सुनिश्चित करता है कि दूसरा स्तंभ पंक्ति में बारह स्तंभों में से केवल चार तक फैला हो। col-sm-4 वर्ग में sm छोटे ब्रेकप्वाइंट का प्रतिनिधित्व करता है, इसलिए, एक साइड सेक्शन केवल छोटे ब्रेकपॉइंट और ऊपर से चार कॉलम पर कब्जा करेगा।
बूटस्ट्रैप नेवबार क्लास
प्रत्येक बूटस्ट्रैप नेविगेशन बार को नेवबार क्लास की आवश्यकता होती है। उन्हें <nav> टैग के उपयोग या नेवबार के पैरेंट डिव में बूटस्ट्रैप भूमिका विशेषता के लिए “नेविगेशन” कीवर्ड निर्दिष्ट करने की भी आवश्यकता होती है। नेवबार को उत्तरदायी बनाने के लिए आपको कोलैप्स जावास्क्रिप्ट प्लगइन का उपयोग करना होगा।
बूटस्ट्रैप नेवबार वर्ग एक एरिया-वर्तमान विशेषता का उपयोग करता है जो वर्तमान पृष्ठ को इंगित करने के लिए “पृष्ठ” मान लेता है, या वेबपृष्ठ के वर्तमान अनुभाग को इंगित करने के लिए “सत्य” लेता है। आपके द्वारा निर्दिष्ट मूल्य आपकी वेबसाइट की संरचना (एक पृष्ठ या एकाधिक पृष्ठ) पर निर्भर करेगा। वर्तमान पृष्ठ या अनुभाग को इंगित करने के लिए आपको सक्रिय वर्ग का भी उपयोग करना चाहिए।
उपरोक्त कोड में कई अन्य महत्वपूर्ण वर्ग और बूटस्ट्रैप विशेषताएँ हैं, जैसे नेवबार-ब्रांड वर्ग, जो आपके नेवबार के लोगो अनुभाग को लक्षित करता है। नेवबार भी पूरी तरह से उत्तरदायी है जावास्क्रिप्ट प्लगइन के पतन के लिए धन्यवाद।
उत्तरदायी नवबार
आपको याद होगा कि बूटस्ट्रैप में छह डिफ़ॉल्ट ब्रेकप्वाइंट होते हैं और उनमें से एक ब्रेकपॉइंट बड़ा (एलजी) होता है। ऊपर <एनएवी> टैग में नेवबार-विस्तार-एलजी वर्ग बड़े ब्रेकपॉइंट और ऊपर नेविगेशन आइटम की एक क्षैतिज सूची में फैलता है, और वह सूची बड़े के नीचे किसी भी ब्रेकपॉइंट पर एक बटन पर वापस आती है।
यदि आप प्रतिक्रियाशील वेबसाइट बनाने के बारे में अधिक जानना चाहते हैं, तो हमने HTML और CSS में मीडिया प्रश्नों के साथ इसे कैसे करें, इसकी रूपरेखा तैयार की है।