Bootstrap in Hindi: बूटस्ट्रैप responsive और मोबाइल-प्रथम वेबसाइटों को विकसित करने के लिए सबसे लोकप्रिय CSS फ्रेमवर्क है। यानी की बूटस्ट्रैप वेबसाइटों और वेब ऐप्स के निर्माण के लिए एक मुफ़्त, ओपन-सोर्स फ्रंट-एंड डेवलपमेंट फ्रेमवर्क है।
एक Bootstrap ढांचा विकास को तेज और अधिक सुव्यवस्थित करने में सक्षम बनाता है। यानी कि बूटस्ट्रैप किसी भी वेब डेवलपर के लिए उनके तकनीकी शस्त्रागार के हिस्से के रूप में उपयोगी हो सकता है।
इस लेख “Bootstrap in Hindi” में, हम Bootstrap ढांचे और उसके सभी बुनियादी सिद्धांतों पर करीब से नज़र डालेंगे, साथ ही इसका उपयोग करने के तरीके सीखने के कुछ लाभों पर भी ध्यान देंगे।
Table of Contents
बूटस्ट्रैप क्या है (What is Bootstrap in Hindi)?
बूटस्ट्रैप एक मोबाइल के अनुकूल और responsive वेबसाइट विकसित करने के लिए सबसे लोकप्रिय HTML, CSS और जावास्क्रिप्ट ढांचा (framework) है। Bootstrap कोड के पुन: प्रयोज्य और बहुमुखी टुकड़ों का एक विशाल संग्रह है जो सीएसएस, एचटीएमएल और जावास्क्रिप्ट में लिखे गए हैं।
चूंकि यह एक ढांचा भी है, इसलिए सभी नींव पहले से ही उत्तरदायी वेब विकास के लिए रखी गई हैं, और सभी डेवलपर्स को कोड को पूर्व-निर्धारित ग्रिड सिस्टम में डालना है।
मूल रूप से, Bootstrap में नेविगेशन, टाइपोग्राफी, टेबल, फॉर्म, मोडल, इमेज बटन, कैरोसेल और कई अन्य के साथ-साथ वैकल्पिक जावास्क्रिप्ट प्लगइन्स के लिए HTML और CSS आधारित डिज़ाइन टेम्प्लेट शामिल हैं। बूटस्ट्रैप को Jacob Thornton और Mark Otto द्वारा विकसित किया गया था, और अगस्त 2011 में GitHub पर एक ओपन-सोर्स उत्पाद के रूप में जारी किया गया था।
आम तौर पर, यह आपको विशेष रूप से सीएसएस कोड के लंबे तार लिखने से बचाता है। यह आपको अधिक समय के साथ-साथ स्वयं वेबपेजों के डिजाइन पर काम करने की क्षमता भी देता है। फिलहाल, बूटस्ट्रैप को GitHub द्वारा होस्ट किया जाता है।
बूटस्ट्रैप के कार्य (Functions of Bootstrap)
- बूटस्ट्रैप टेम्पलेट डिज़ाइन के लिए सिंटैक्स का एक संग्रह प्रदान करता है।
- मूल रूप से, बूटस्ट्रैप का प्राथमिक उद्देश्य responsible, मोबाइल-प्रथम वेबसाइट बनाना है।
- यह सुनिश्चित करता है कि वेबसाइट के सभी इंटरफ़ेस तत्व (elements) सभी स्क्रीन आकारों पर बेहतर तरीके से काम करें।
- Bootstrap दो प्रकारों में उपलब्ध है – एक पहले से संकलित (precompiled) और दूसरा source code version पर आधारित।
उदाहरण के लिए, बूटस्ट्रैप का “सोर्स कोड” संस्करण आपको Sass port तक पहुंचने देता है।
आपको Bootstrap का उपयोग क्यों करना चाहिए?
यहाँ Bootstrap का उपयोग करने के कुछ मुख्य कारण दिए गए हैं:
- बूटस्ट्रैप सीखना आसान है। इसके ट्यूटोरियल ऑनलाइन पर उपलब्ध हैं।
- Bootstrap के कुछ इंटरफ़ेस घटकों में ग्रिड सिस्टम, नेविगेशन बार, बटन, और छवि carousels शामिल हैं
- बूटस्ट्रैप वेब डेवलपर्स और वेब डिज़ाइनरों के बीच इतना लोकप्रिय होने का एक कारण यह है कि इसकी एक साधारण फ़ाइल संरचना है।
- इसकी फाइलें आसान पहुंच के लिए संकलित की जाती हैं, और उन्हें संशोधित करने के लिए केवल HTML, CSS और JS के बेसिक ज्ञान की आवश्यकता होती है।
बूटस्ट्रैप की 3 प्राथमिक फ़ाइलें (3 Primary Files of Bootstrap)
Bootstrap में तीन प्राथमिक फ़ाइलों हैं: Bootstrap.css, Bootstrap.js, और Glyphicons में संकलित सिंटैक्स का एक संग्रह होता है।
ध्यान रखें कि बूटस्ट्रैप को JavaScript plugins और components को चलाने के लिए jQuery नामक JS लाइब्रेरी की आवश्यकता होती है।
वेब डेवलपमेंट में Bootstrap का उपयोग कैसे करें
बूटस्ट्रैप का उपयोग करने की बेहतर तस्वीर प्राप्त करने के लिए, नीचे दिए गए उदाहरण पर एक नज़र डालें:
<html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <h1>Hello, tutorialinhindi!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
हम कुछ पंक्तियों के बारे में अधिक विस्तार से बताएंगे।
meta charset="utf-8"वेबसाइट लिखने के लिए उपयोग किए जाने वाले कैरेक्टर सेट को बताता है। इस मामले में, UTF-8 यूनिकोड को संदर्भित करता है।
meta http-equiv="X-UA-Compatible"इंटरनेट एक्सप्लोरर के उस संस्करण को निर्धारित करता है जो पृष्ठ को प्रस्तुत करना चाहिए। एज मोड का उपयोग करते हुए, यह उपलब्ध उच्चतम मोड का उपयोग करने के लिए तैयार है।
meta name="viewport"यह सुनिश्चित करता है कि पेज का व्यूपोर्ट आकार के साथ 1:1 का अनुपात है।
link href="css/bootstrap.min.css" rel="stylesheet"यह वह जगह है जहां हम बूटस्ट्रैप कोर सीएसएस जोड़ते हैं।
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"Google CDN के माध्यम से jQuery लोड करता है। इसे CDN से HTTP के माध्यम से लोड करना बेहतर है क्योंकि फाइलों को एक वर्ष के लिए कैश किया जा सकता है।
src="js/bootstrap.min.jsबूटस्ट्रैप कोर जावास्क्रिप्ट जोड़ता है। यह सिंटैक्स ठीक से काम करने के लिए jQuery सिंटैक्स के नीचे होना चाहिए। जोड़ने की प्रक्रिया Google के URL या मैन्युअल डाउनलोड के माध्यम से की जा सकती है।
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
Bootstrap प्रक्रिया को सरल बनाने के लिए एक जावास्क्रिप्ट बंडल प्रदान करता है। हालांकि, bootstrap.bundle.js और bootstrap.bundle.min.js में jQuery के बजाय popper शामिल हैं। Popper तत्वों की स्थिति की गणना के लिए एक पोजिशनिंग इंजन है।
साइट के मेनू बनाने के लिए बूटस्ट्रैप नेवबार नेविगेशन लिंक का उपयोग करने का एक उदाहरण:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
बूटस्ट्रैप के लाभ (Advantages of Bootstrap)
यहाँ Bootstrap के कुछ सबसे महत्वपूर्ण लाभ दिए गए हैं:
- Bootstrap एक ओपन-सोर्स फ्रेमवर्क है।
- बूटस्ट्रैप क्रॉस-ब्राउज़र संगतता है।
- Bootstrap को सीखना आसान है।
- वेब विकास में बूटस्ट्रैप कोडिंग को परेशानी मुक्त बनाता है।
- यह एकाधिक परियोजनाओं के बीच दोहराव को रोकने में आसान।
- आपको पृष्ठ के UI डिज़ाइन को समायोजित करने की आवश्यकता नहीं है।
आवश्यक कुशलता (Bootstrap Required skills)
- वेब ऐप और डिजाइनिंग का बुनियादी स्तर।
- आपको HTML, CSS और मूल Javascript से परिचित होना चाहिए।
- कोई अन्य पुस्तकालय जैसे कि jQuery, आदि।
- आपको MVC बैकएंड फ्रेमवर्क की समझ होनी चाहिए।
फ्री में वेब डिजाइनिंग सीखें
यदि आप वेब डिजाइनिंग सीखना चाहते हैं, तो यहां हमारी चरण-दर-चरण मार्गदर्शिका है जो आपको वेब डिजाइनिंग सीखने में मदद करेगी। सीखना शुरू करने के लिए “वेब डिजाइनिंग सीखें” बटन पर क्लिक करें:
Bootstrap FAQs:
HTML और CSS-समर्थित डिज़ाइन टेम्प्लेट इस ढांचे में उपलब्ध हैं, जो वेबसाइटों को बहुत आसान और तेज़ डिज़ाइन करने में मदद करते हैं। इन टेम्प्लेट का उपयोग टाइपोग्राफी, बटन, टेबल, फॉर्म, मॉडल, नेविगेशन, इमेज कैरोसेल आदि के लिए किया जाता है।
इसकी कुछ मुख्य विशेषताएं हैं जैसे सीएसएस, पुन: उपयोग करने योग्य खंड, जावास्क्रिप्ट भाग। कुछ अन्य UI डिज़ाइनिंग टूल, जैसे Gumby, Skeleton, और Zurb, प्रतिस्पर्धा में हैं लेकिन बूटस्ट्रैप के करीब नहीं हैं।
फ्री में कोडिंग सीखें (Learn Coding)
यदि आप कोडिंग सीखना चाहते हैं लेकिन यह नहीं जानते कि कैसे सीखना है तो यहां हमारी चरण-दर-चरण मार्गदर्शिका है:
निष्कर्ष
Bootstrap वर्तमान में सबसे लोकप्रिय फ्रंट-एंड फ्रेमवर्क है, जिसे twitter डेवलपर्स द्वारा बनाया गिया है। इस उपयोगिता का मुख्य उद्देश्य एक ऐसे उपकरण का निर्माण करना था जो वेबसाइट से संबंधित अनुप्रयोगों को तेज, आसान, सुविधाजनक और अधिक प्रतिक्रियाशील बनाने में मदद करता है।
मुझे उम्मीद है कि यह लेख “What is Bootstrap in Hindi”, आपको यह समझने में मदद करेगा कि बूटस्ट्रैप क्या है और इसका उपयोग कैसे किया जाता है।