2011 में, ट्विटर ने बूटस्ट्रैप फ्रेमवर्क पेश किया। तब से, इस सीएसएस ढांचे ने दो प्रमुख पुनर्लेखन देखे हैं, जिसमें सबसे हालिया एक (बूटस्ट्रैप 3) 2013 में जारी किया गया है। बूटस्ट्रैप 3 ने मोबाइल-प्रथम दृष्टिकोण को लागू करके सीएसएस पुस्तकालय को बदल दिया जिसने ढांचे को पूरी तरह उत्तरदायी छोड़ दिया।
2022 तक, बूटस्ट्रैप संस्करण पांच पर है और यह सबसे लोकप्रिय फ्रंटएंड फ्रेमवर्क में से एक है। इसमें पूर्वनिर्मित घटकों की एक विस्तृत सूची और जावास्क्रिप्ट प्लगइन्स का एक प्रभावशाली संग्रह है। इस लेख में, आप सीखेंगे कि बूटस्ट्रैप का उपयोग कैसे करें और इसकी सुविधाओं का अधिकतम लाभ उठाएं।
अपने प्रोजेक्ट में बूटस्ट्रैप इंस्टाल करना
तीन तरीके हैं अपने प्रोजेक्ट में बूटस्ट्रैप का उपयोग करें. आप सीएसएस और जावास्क्रिप्ट फाइलों को डाउनलोड और होस्ट कर सकते हैं, एनपीएम का उपयोग करके इसे अपने प्रोजेक्ट में इंस्टॉल कर सकते हैं, या अपने प्रोजेक्ट में उपयुक्त सीडीएन लिंक कॉपी और पेस्ट कर सकते हैं।
सीडीएन दृष्टिकोण के साथ, आपको अपनी एचटीएमएल फाइल के हेड टैग में किसी अन्य सीएसएस लिंक से पहले बूटस्ट्रैप लिंक रखना याद रखना होगा।
कुछ बूटस्ट्रैप घटकों में कार्यात्मक गतिविधियाँ होती हैं, जैसे बटन टॉगल करना और स्थिति निर्धारण जिसके लिए जावास्क्रिप्ट और पॉपर स्क्रिप्ट के आयात की आवश्यकता होती है। इसलिए, यदि आप किसी कार्यात्मक घटक का उपयोग करना चाहते हैं, तो आपको अपनी HTML फ़ाइल में स्क्रिप्ट टैग भी जोड़ना होगा।
बूटस्ट्रैप का उपयोग शुरू करने के लिए आपको जो अंतिम चीज चाहिए वह है व्यूपोर्ट उपनाम.
चूंकि बूटस्ट्रैप एक मोबाइल-प्रथम तकनीक है, इसलिए व्यूपोर्ट उपनाम उत्तरदायी डिजाइन में सहायता करेगा। अपने प्रोजेक्ट में बूटस्ट्रैप का उपयोग करने का एक आसान तरीका सिर्फ कॉपी करना है बूटस्ट्रैप का स्टार्टर टेम्प्लेट.
बूटस्ट्रैप के साथ एक वेबसाइट बनाना
जब आप एक नई वेबसाइट बना रहे हों, तो सबसे पहले आपको जिस चीज पर विचार करना चाहिए, वह है लेआउट। उसके बाद, आप बटन और टाइपोग्राफी जैसे अन्य घटकों पर जा सकते हैं।
बूटस्ट्रैप में संरचनात्मक घटकों का एक संग्रह है जिसका उपयोग आप वेब पेज पर तत्वों को व्यवस्थित करने के लिए कर सकते हैं। इन लेआउट संरचनाओं में शामिल हैं:
- कंटेनरों
- ग्रिड
- कॉलम
- गटर
- ब्रेकप्वाइंट
बूटस्ट्रैप स्टार्टर टेम्प्लेट के थोड़े बदले हुए संस्करण का उपयोग करके, आप अपने वेबपेज की संरचना को रेखांकित करना शुरू कर सकते हैं और नए घटक जोड़ सकते हैं।
index.html फ़ाइल
आवश्यक मेटा टैगबूटस्ट्रैप सीएसएस
बूटस्ट्रैप
अलग पॉपर और बूटस्ट्रैप JS
बूटस्ट्रैप कंटेनर क्लास
बूटस्ट्रैप पात्र क्लास पैड आपके वेबपेज पर तत्वों को शामिल करता है, और संरेखित करता है। यदि आप बूटस्ट्रैप का उपयोग करने की योजना बना रहे हैं डिफ़ॉल्ट ग्रिड, तो आपको बूटस्ट्रैप का भी उपयोग करना होगा पात्र कक्षा। तीन प्रकार के होते हैं पात्र कक्षाएं; पात्र, कंटेनर-द्रव, तथा कंटेनर- {ब्रेकपॉइंट}. कंटेनर वर्ग डिफ़ॉल्ट कंटेनर है; यह उत्तरदायी है और प्रत्येक बूटस्ट्रैप छह ब्रेकप्वाइंट पर एक निश्चित-चौड़ाई है।
बूटस्ट्रैप के छह डिफ़ॉल्ट ब्रेकप्वाइंट में शामिल हैं:
- अतिरिक्त छोटा: 576px से कम।
- छोटा: 576px से बड़ा या उसके बराबर।
- माध्यम: 768px से बड़ा या उसके बराबर।
- बड़ा: 992px से बड़ा या उसके बराबर।
- एक्स बड़े: 1200px से बड़ा या उसके बराबर।
- एक्सएक्स-बड़ा: 1400px से बड़ा या उसके बराबर।
बूटस्ट्रैप का उपयोग करने के लिए पात्र अपनी परियोजना में, आप बस वांछित कंटेनर वर्ग को बाहरी में जोड़ सकते हैं डिव आपके वेबपेज पर।
बूटस्ट्रैप के कंटेनर का उपयोग करना
वेबसाइट तत्वों को यहां रखें उपरोक्त कोड को अपनी मौजूदा HTML फ़ाइल के मुख्य भाग में सम्मिलित करने से आपका वेबपृष्ठ उत्तरदायी बन जाएगा, और यह आपके वेबपृष्ठ के प्रत्येक पक्ष पर पैडिंग भी बनाएगा।
बूटस्ट्रैप ग्रिड सिस्टम
बूटस्ट्रैप का ग्रिड बारह-स्तंभ प्रणाली का उपयोग करता है जो पर निर्भर करता है पंक्ति तथा कर्नल ग्रिड कक्षाएं, साथ ही साथ कंटेनर वर्ग। प्रत्येक पंक्ति में बारह कॉलम होते हैं, और कोई भी तत्व इनमें से एक या अधिक कॉलम में फैल सकता है। कॉलम वर्ग इंगित करेगा कि तत्व को कितने कॉलम पर कब्जा करना चाहिए। उदाहरण के लिए, का उपयोग करने वाला एक तत्व कर्नल-2 वर्ग दो स्तंभों में फैला होगा, एक तत्व का उपयोग कर रहा है कर्नल-3 कक्षा तीन स्तंभों में फैलेगी, और इसके आगे।
बूटस्ट्रैप ग्रिड सिस्टम फ्लेक्सबॉक्स मॉड्यूल पर आधारित है। यदि केवल दो कॉलम एक पंक्ति में हैं, तो वे आपस में समान रूप से स्थान विभाजित करेंगे। नाली क्लास बूटस्ट्रैप के संरचनात्मक तत्वों में से एक है, और यह प्रत्येक कॉलम के बीच की दूरी को नियंत्रित करता है ग्रिड प्रणाली. प्रत्येक ग्रिड कॉलम में दोनों तरफ 12px की पैडिंग है।
बूटस्ट्रैप के ग्रिड सिस्टम का उपयोग करना
वेबपेज पर मुख्य सामग्री
लेख
लोरेम इप्सम, डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। डोलोरेम पोरो नॉन क्वे
obcaecati illo Laboriosam a, voluptate molestias eum velit, विशिष्टता impedit
राशन फेसरे numquam, optio eligendi delectus cumque quos।
उपरोक्त कोड को कंटेनर डिव में डालने से तीन पंक्तियों और दो स्तंभों का बूटस्ट्रैप ग्रिड सिस्टम बन जाएगा। शीर्ष पर पहली पंक्ति नेवबार को धारण करेगी, नीचे की तीसरी पंक्ति में वेबसाइट के पाद लेख होंगे, और बीच में दूसरी पंक्ति में वेबपेज की सामग्री होगी। दूसरी पंक्ति में दो कॉलम हैं- मुख्य लेख और एक तरफ।
एक स्थानीय सीएसएस फ़ाइल बनाना और ग्रिड के प्रत्येक अनुभाग में एक सीमा जोड़ना आपको इसे और अधिक स्पष्ट रूप से देखने की अनुमति देगा।
Style.css फ़ाइल
।पंक्ति{
सीमा: 2px नीला ठोस;
}
.col, .col-sm-4{
सीमा: 2px लाल ठोस;
}
ऊपर दी गई CSS फ़ाइल से लिंक करने से आपके ब्राउज़र में निम्न आउटपुट तैयार होगा:
ऊपर की छवि में एक स्पष्ट अंतर स्तंभों के आकार का है। आमतौर पर, एक पंक्ति में दो (या अधिक) कॉलम समान मात्रा में स्थान घेरते हैं जब तक कि आप स्पष्ट रूप से अन्यथा नहीं बताते। col-sm-4 ऊपर दिए गए HTML कोड में वर्ग यह सुनिश्चित करता है कि दूसरा स्तंभ पंक्ति में बारह स्तंभों में से केवल चार तक फैला हो। एसएम में col-sm-4 वर्ग छोटे ब्रेकपॉइंट का प्रतिनिधित्व करता है, इसलिए, एक तरफ अनुभाग केवल छोटे ब्रेकपॉइंट और ऊपर से चार कॉलम पर कब्जा कर लेगा।
बूटस्ट्रैप घटक
अपने वेबपेज के लेआउट पर निर्णय लेने के बाद अगला कदम वेबसाइट निर्माण तत्वों को जोड़ना है, जिसे बूटस्ट्रैप घटक कहते हैं। बूटस्ट्रैप के घटकों की सूची में शामिल हैं:
- नेवबार
- बटन
- बटन समूह
- सूची समूह
- पत्ते
- ढहना
- नीचे की ओर फैलने वाला बिंदु
बूटस्ट्रैप नेवबार क्लास
प्रत्येक बूटस्ट्रैप नेविगेशन बार की आवश्यकता होती है नेवबार कक्षा। उन्हें के उपयोग की भी आवश्यकता होती है या बूटस्ट्रैप को "नेविगेशन" कीवर्ड असाइन करना भूमिका नेवबार के पैरेंट में विशेषता डिव. नेवबार को उत्तरदायी बनाने के लिए आपको इसका उपयोग करना होगा जावास्क्रिप्ट प्लगइन को संक्षिप्त करें.
बूटस्ट्रैप नेवबार वर्ग an. का उपयोग करता है एरिया-करंट विशेषता जो वर्तमान पृष्ठ को इंगित करने के लिए "पृष्ठ" मान लेती है, या किसी वेबपृष्ठ के वर्तमान अनुभाग को इंगित करने के लिए "सत्य" लेती है। आपके द्वारा निर्दिष्ट मूल्य आपकी वेबसाइट की संरचना (एक पृष्ठ या एकाधिक पृष्ठ) पर निर्भर करेगा। आप का भी उपयोग करना चाहिए सक्रिय वर्ग वर्तमान पृष्ठ या अनुभाग को इंगित करने के लिए।
बूटस्ट्रैप के नवबार का उपयोग करना
नेविगेशन को बदलना पंक्ति बूटस्ट्रैप के ग्रिड उपरोक्त कोड के साथ आपके ब्राउज़र में निम्न आउटपुट बनाएगा:
उपरोक्त कोड में कई अन्य महत्वपूर्ण वर्ग और बूटस्ट्रैप विशेषताएँ हैं, जैसे कि नेवबार-ब्रांड वर्ग, जो आपके लोगो अनुभाग को लक्षित करता है नेवबार. नेवबार के लिए पूरी तरह उत्तरदायी भी है जावास्क्रिप्ट प्लगइन को संक्षिप्त करें.
उत्तरदायी नवबार
आपको याद होगा कि बूटस्ट्रैप में छह डिफ़ॉल्ट हैं विराम बिंदु और उनमें से एक ब्रेकप्वाइंट बड़ा (एलजी) है। नावबार-विस्तार-lg कक्षा में ऊपर बड़े ब्रेकपॉइंट और ऊपर नेविगेशन आइटम की एक क्षैतिज सूची में फैलता है, और वह सूची बड़े के नीचे किसी भी ब्रेकपॉइंट पर एक बटन पर वापस आती है।
यदि आप प्रतिक्रियाशील वेबसाइट बनाने के बारे में अधिक जानना चाहते हैं, तो हमने एक अंश की रूपरेखा तैयार की है HTML और CSS में मीडिया प्रश्नों के साथ इसे कैसे करें.
बूटस्ट्रैप बटन घटक
बूटस्ट्रैप बटन घटक का उपयोग करता है और आवश्यक है कि आप इसे सेट करें प्रकार "बटन" के लिए विशेषता।
बूटस्ट्रैप में कई प्रकार के बटन होते हैं। अधिक पारंपरिक बटन बनाने के लिए आप इसका उपयोग करेंगे बीटीएन वर्ग, लेकिन ऊपर दिए गए कोड की तरह हैमबर्गर बटन बनाने के लिए आप इसका उपयोग करेंगे नावबार-टॉगल कक्षा।
आपको बूटस्ट्रैप का उपयोग कब करना चाहिए?
बूटस्ट्रैप को अधिक लोकप्रिय CSS फ्रेमवर्क में से एक के रूप में जाना जाता है क्योंकि यह एक ट्रेलब्लेज़र है। सॉफ्टवेयर विकास में उत्तरदायी डिजाइन इतना सामान्य होने से बहुत पहले, बूटस्ट्रैप ने खुद को पूरी तरह उत्तरदायी ढांचे में बदल दिया।
इन वर्षों में, बूटस्ट्रैप ने आगे बढ़ना और सुधार करना जारी रखा है, जिससे यह ट्विटर और स्पॉटिफ़ जैसी शीर्ष कंपनियों के लिए नंबर एक विकल्प बन गया है। हालांकि, यह आपके सॉफ़्टवेयर विकास की ज़रूरतों के लिए हमेशा सबसे अच्छा विकल्प नहीं होगा। उदाहरण के लिए, यदि आप एक रिएक्ट एप्लिकेशन बना रहे हैं, तो एमयूआई नामक एक डिज़ाइन सिस्टम है जो रिएक्ट एप्लिकेशन के लिए अनुकूलित है।
मटेरियल-यूआई का एक नया नाम है और इसका उद्देश्य मटीरियल डिज़ाइन के विकल्प के लिए एक नया डिज़ाइन सिस्टम बनाना है। यहां बताया गया है कि आप ReactJS प्रोजेक्ट्स में MUI का उपयोग कैसे कर सकते हैं।
आगे पढ़िए
- प्रोग्रामिंग
- ट्विटर
- कोडिंग टिप्स
- प्रोग्रामिंग
- प्रोग्रामिंग टूल्स
कदीशा कीन एक पूर्ण-स्टैक सॉफ़्टवेयर डेवलपर और तकनीकी/प्रौद्योगिकी लेखक हैं। उसके पास कुछ सबसे जटिल तकनीकी अवधारणाओं को सरल बनाने की विशिष्ट क्षमता है; उत्पादन सामग्री जिसे किसी भी तकनीकी नौसिखिए द्वारा आसानी से समझा जा सकता है। उसे लिखने, दिलचस्प सॉफ्टवेयर विकसित करने और दुनिया की यात्रा (वृत्तचित्रों के माध्यम से) करने का शौक है।
हमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें
