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

बूटस्ट्रैप एक ओपन-सोर्स (Open Source) जावास्क्रिप्ट फ्रेमवर्क है। बूटस्ट्रैप तेज (Fast) और आसान (Easy) वेब विकास के लिए एक शक्तिशाली फ्रंट-एंड फ्रेमवर्क (Front-End Framework) है। यह HTML, CSS और Javascript का उपयोग करता है। बूटस्ट्रैप को ट्विटर टीम (Twitter Team) के मार्क ओटो (Mark Otto) और जैकब थॉर्नटन (Jacob Thornton) द्वारा विकसित किया गया था। इसे अगस्त 2011 में गिटहब (GitHub) पर एक ओपन सोर्स प्रोजेक्ट (Open Source Project) के रूप में रिलीज़ किया गया था। रेस्पॉन्सिव वेबसाइट (Responsive Website) बनाने में बूटस्ट्रैप का उपयोग अधिक होता है। आज हम सीखेंगे की “बूटस्ट्रैप क्या है? (What is Bootstrap in Hindi)“, “Bootstrap का परिचय (Introduction to Bootstrap in Hindi)“, “बूटस्ट्रैप का इतिहास (History of Bootstrap in Hindi)“, “बूटस्ट्रैप का उपयोग कैसे करें? (How to Use Bootstrap)“, “बूटस्ट्रैप की विशेषताएं (Features of Bootstrap in Hindi)“, “बूटस्ट्रैप के फायदे (Advantage of Bootstrap in Hindi)“। इस पोस्ट में, मैं “Bootstrap Kya Hai” और कुछ संबंधित सवालों के जवाब देने जा रहा हूं, अगर आपके मन में भी ऐसा कोई सवाल है, तो मुझे उम्मीद है कि आपको अपना जवाब जरूर मिलेगा।

शायद, आपके मन में यह सवाल आया होगा कि एक रेस्पॉन्सिव वेबसाइट क्या होता है? (What is Responsive Website in Hindi) रेस्पॉन्सिव वेबसाइट का अर्थ होता है की यह एक वेब डिज़ाइन (Web Design) होती है जो किसी भी स्क्रीन आकार (Screen size) के लिए अडॉप्ट (Adopt) करती है, इसलिए मोबाइल (Mobile) पर इसका उपयोग करना उतना ही आसान है जितना कि टैबलेट (Tablet) या डेस्कटॉप (Desktop) पर।

बूटस्ट्रैप में बनाई गई वेबसाइट (Website) अधिक आकर्षक (Attractive) और तेज (Fast) होती हैं। लगभग सभी प्रकार की वेबसाइटें आज बूटस्ट्रैप में बनाई जा रही हैं। यदि आप वेब डिजाइनिंग (Web Designing) में रुचि रखते हैं, तो यह किसी भी वेब डिजाइनर (Web Designer) के लिए एक बहुत ही महत्वपूर्ण जावास्क्रिप्ट फ्रेमवर्क (Javascript Framework) है, जिसका उपयोग लाइट वेट (Light Weight) और मोबाइल फ्रेंडली वेबसाइट (Mobile Friendly Website) को डिजाइन करने के लिए किया जाता है।

क्या आप एक सफल वेब डेवलपर (Web Developer) बनना चाहते हैं? या अपनी वेबसाइट को रेस्पॉन्सिव (Responsive) बनाना चाहते हैं? तो बूटस्ट्रैप सीखना आपके लिए बहुत महत्वपूर्ण है, अगर आप बूटस्ट्रैप (Bootstrap) सीखते हैं, तो इसे वेबसाइट डिजाइनिंग (Website Designing) या डेवलपमेंट (Development) में उपयोग कर सकते है।

बूटस्ट्रैप का इतिहास (History of Bootstrap )

बूटस्ट्रैप को ट्विटर (Twitter) कंपनी के मार्क ओटो ( Mark Otto) और जैकब थॉर्नटन (Jacob Thornton) ने अपनी टीम के साथ विकसित किया था। शुरुआत में, उन्होंने इसे ट्विटर ब्लूप्रिंट (Twitter Blueprint) नाम दिया, क्योंकि वे इसे ट्विटर के लिए उपयोग करना चाहते थे, लेकिन बाद में उन्होंने इसे 19 अगस्त, 2011 को बूटस्ट्रैप (Bootstrap) नाम पर गिटहब (GitHub) पर एक ओपन सोर्स प्रोजेक्ट के रूप में रिलीज़ किया। इसे फ्रेमवर्क को कोई भी अपनी वेबसाइट पर मुफ्त (Free of Cost) में उपयोग कर सकता है।

हालांकि ऐसे कई सारे फ्रेमवर्क उपलब्ध हैं, लेकिन बूटस्ट्रैप उनमें से सबसे लोकप्रिय और सबसे व्यापक रूप से उपयोग किए जाने वाले फ्रेमवर्क में से एक है। बूटस्ट्रैप जून 2014 में गिटहब पर नंबर 1 प्रोजेक्ट बनाया गया था, और आज पूरी दुनिया के डेवलपर्स इसे रेस्पॉन्सिव वेबसाइट डिजाइन करने के लिए उपयोग करते हैं।

बूटस्ट्रैप HTML, सीएसएस (CSS) और जावास्क्रिप्ट (Javascript) की मदद से बनाया गया है, बूटस्ट्रैप में फॉर्म (Forms), बटन्स (Buttons), टेबल्स (Tables), नेविगेशन (Navigation), मॉडल (Model), जंबोट्रॉन (Jumbotron), ड्रॉपडाउन मेनू (Dropdown Menu), स्लाइडर (Slider), हेडर (Header), फूटर (Footer) आदि को आसानी से बनाया जा सकता है। बूटस्ट्रैप डेवलपर्स (Bootstrap Developers) ने HTML एलेमेंट्स (HTML Elements) बनाये हैं, उन्हें CSS क्लासेज (CSS Classes) देकर और JavaScripts का उपयोग करके रेस्पॉन्सिव और स्टाइलिश बनाया और इसलिए इसमें आपको अधिक काम करने की आवश्यकता नहीं है, आपको बस उन बने हुए कंपोनेंट्स (Components) का उपयोग करना होगा।

बूटस्ट्रैप का उपयोग कैसे करें? (How to Use Bootstrap)

जैसा कि हमने ऊपर पढ़ा, बूटस्ट्रैप एक स्वतंत्र और ओपन-सोर्स फ्रंट-एंड डेवलपमेंट फ्रेमवर्क है। इसमें टाइपोग्राफी (Typography), फॉर्म (Forms), बटन्स (Buttons), नेविगेशन (Navigation) और अन्य कंपोनेंट्स (Components ) के साथ-साथ HTML, सीएसएस और जावास्क्रिप्ट आधारित वेबसाइट टेम्पलेट डिज़ाइन भी शामिल हैं। इसलिए, बूटस्ट्रैप बहुत लोकप्रिय है और इसके कई फायदे हैं, आप अपनी वेबसाइट बनाने के लिए बूटस्ट्रैप वेबसाइट टेम्पलेट का उपयोग कर सकते हैं। रेस्पॉन्सिव वेबसाइटों को बनाने के लिए “बूटस्ट्रैप टेम्पलेट” (Bootstrap Template) का उपयोग किया जाता है, इसलिए यह सीखना महत्वपूर्ण है कि इसका उपयोग कैसे किया जाए।

आप बूटस्ट्रैप को 2 तरीकों से उपयोग कर सकते हैं:

• बूटस्ट्रैप को डाउनलोड (Download) कर सकते हैं।
• आप CDN के साथ बूटस्ट्रैप इनस्टॉल (Install) कर सकते हैं।

सबसे पहले, आप बूटस्ट्रैप की आधिकारिक वेबसाइट पर जाएं और डाउनलोड बटन पर क्लिक करें:

जब आप बूटस्ट्रैप डाउनलोड करते हैं, तो आपको एक जिप फाइल (Zip File) मिलेगी। इसे अनज़िप (Unzip) करें, आपको एक फ़ोल्डर (Folder) मिलेगा जिसमें तीन फ़ोल्डर होता है। आप ऑनलाइन (Online) या ऑफलाइन (Offline) तरीके से बूटस्ट्रैप को अपने HTML में इनस्टॉल (Install) या लिंक (Link) कर सकते हैं:

• CSS
• JS
• Fonts

आप अपनी वेबसाइट के रूट फोल्डर (Public_html) में इन तीन फ़ोल्डरों को कॉपी (Copy) और पेस्ट (Paste) कर सकते हैं।

रूट फ़ोल्डर में पेस्ट करने के बाद, आप CSS को लिंक कर सकते हैं:

<link rel=”stylesheet” href=”css/bootstrap.css”>

इसी तरह आप Javascript फ़ाइल को भी लिंक कर सकते हैं:

<script src=”js/bootstrap.js” type=”text/javascript”></script>

आपने अपनी वेबसाइट में सफलतापूर्वक बूटस्ट्रैप को इनस्टॉल कर दिया है।

यदि आप स्वयं बूटस्ट्रैप डाउनलोड और होस्ट (Host) नहीं करना चाहते हैं, तो आप इसे CDN (Content Delivery Network) विधि द्वारा इनस्टॉल कर सकते हैं। MaxCDN बूटस्ट्रैप के CSS और JavaScript के लिए CDN सपोर्ट (Support) प्रदान करता है।

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

बूटस्ट्रैप की विशेषताएं (Features of Bootstrap )

• Open Source: बूटस्ट्रैप के बारे में सबसे अच्छी बात यह है कि यह ओपन सोर्स (Open Source) है, आप इसे मुफ्त (Free) में उपयोग कर सकते हैं।
• Easy to Use: अगर आपको HTML और CSS की बेसिक समझ है तो आप आसानी से बूटस्ट्रैप का उपयोग कर सकते हैं। बूटस्ट्रैप बहुत आसान है और आप बूटस्ट्रैप कंपोनेंट्स (Bootstrap Components) का उपयोग करके आसानी से एक वेबसाइट (Website) बना सकते हैं, बस इसे कॉपी और पेस्ट करना है, अर्थात बूटस्ट्रैप से बनी हुई क्लासेस (Classes) का उपयोग करना हैं।
• Responsive: बूटस्ट्रैप बनाने के पीछे मुख्य उद्देश्य यह था कि लोग आसानी से इसकी मदद से एक अच्छी रेस्पॉन्सिव वेबसाइट बना सकें। आप बूटस्ट्रैप के माध्यम से आसानी से एक रेस्पॉन्सिव वेबसाइट (Responsive Website) बना सकते हैं। बूटस्ट्रैप से आपके द्वारा बनाई गई कोई भी वेबसाइट डेस्कटॉप (Desktop), लैपटॉप (Laptop), टैबलेट (Tablet), मोबाइल (Mobile) आदि पर आसानी से खुल जाएगी, आपकी वेबसाइट बिल्कुल डिवाइस (Device) में फिट दिखाई देगी।
• Browser Compatibility: बूटस्ट्रैप को इस तरह से डिज़ाइन किया गया है कि यह लगभग सभी आधुनिक वेब ब्राउज़रों जैसे कि गूगल क्रोम (Google Chrome), मोज़िला फ़ायरफ़ॉक्स (Mozilla Firefox), इंटरनेट एक्सप्लोरर (Internet Explorer), ओपेरा (Opera) आदि को सपोर्ट करता है।
• Customizable: यदि आप बूटस्ट्रैप की इन-बिल्ट स्टाइल (In-Built Style) को बदलना चाहते हैं, तो आप इसे आसानी से बदल सकते हैं। इसके लिए आपको अपना CSS कोड लिखना होगा और बूटस्ट्रैप कोड को ओवरराइट (Overwrite) करना होगा।
• Save Time: बूटस्ट्रैप फ्रेमवर्क (Bootstrap Framework) में, आपको रेडीमेड कोड मिलता है, जिसे आपको सिर्फ सही जगह पर उपयोग करना होता है, इसलिए यदि आपको कुछ बदलना है तो आपको ज्यादा कोडिंग की आवश्यकता नहीं है। आपको अधिक HTML और CSS कोड का उपयोग करने की आवश्यकता नहीं है और आपका बहुत समय बच जाता है।
• Support: बूटस्ट्रैप समय-समय पर अपडेट (Update) होता है, और प्रत्येक अपडेट में उपयोगकर्ता के लिए बहुत कुछ नया लाता है और इसे गिटहब पर होस्ट किया गया है। वर्तमान में, गिटहब पर होस्ट बूटस्ट्रैप 9000 से अधिक योगदानकर्ताओं के साथ विस्तारित और संरक्षित है।

बूटस्ट्रैप के फायदे (Advantage of Bootstrap )

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