बूस्ट्रैप 5 शुरू
- पिछला पृष्ठ BS5 ट्यूटोरियल
- अगला पृष्ठ BS5 कंटेनर
बूटस्ट्रैप क्या है?
- बूटस्ट्रैप एक मुफ्त फ्रंटएण्ड फ्रेमवर्क है, जो वेब डेवलपमेंट को तेज़ और आसान बनाता है
- बूटस्ट्रैप HTML और CSS पर आधारित डिजाइन टेम्पलेट प्रदान करता है, जिसे फोटोग्राफी, फॉर्म, बटन, तालिका, नेविगेशन, मोडल, इमेज करूलर आदि के लिए उपयोग किया जाता है
- बूटस्ट्रैप कोई विशाल जावास्क्रिप्ट प्लगइन प्रदान करता है
- बूटस्ट्रैप आपको आसानी से उत्तरदायी डिजाइन बनाने में सक्षम करता है
उत्तरदायी वेबसाइट डिजाइन क्या है?
उत्तरदायी वेबसाइट डिजाइन का उद्देश्य, सभी उपकरणों पर उपयोग के अनुभव को बढ़ाने के लिए स्वचालित रूप से समायोजित वेबसाइट बनाना है, चाहे यह मोबाइल हो या बड़ा डेस्कटॉप
बूटस्ट्रैप 5 इंस्टैंस
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>मेरा पहला बूटस्ट्रैप पृष्ठ</h1>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>स्तम्भ 1: वसंत</h3>
<p>विजयवान दिन को फूलों के बारे में खोजते हुए, असीम रूप से आशा की पटरी एक बार नयी हुई।</p>
<p>आसानी से पहचाना गया, दक्षिणवर्ती ब्रिज़ का चेहरा, हर रंग का हर स्त्रोत हर वसंत के साथ।</p>
</div>
<div class="col-sm-4">
<h3>स्तम्भ 2: ग्रीष्मकालीन अंत्योदय</h3>
<p>भीड़-भाड़ लाल-बैंगनी धूल बन गई, गोठी के आवाज़ में गर्मी का नया अवसर आया।</p>
<p>सड़क के दोनों तरफ संबर और तुलसी चलते रहे, पहले से ही मालूम है कि मैं शांतीपूर्ण व्यक्ति हूँ।</p>
</div>
<div class="col-sm-4">
<h3>स्तम्भ 3: पहाड़ी यात्रा</h3>
<p>दूर उपर ठंडे पहाड़ के पानी के मार्ग पर सीधा, ब्लूवाल के जगह में किसी का घर है।</p>
<p>सवारी बंद करके फेंक लिया, आगे गए फल के बगीचे में, जो फरवरी के फूलों से लाल है।</p>
</div>
</div>
</div>
Bootstrap संस्करण
Bootstrap 5 (2021 में जारी किया गया) Bootstrap का सबसे नया संस्करण (2013 में जारी किया गया) है; नए कंपोनेंट, तीव्र शैली पट्टियों के साथ, तीव्र जवाबी क्षमता प्रदान करता है。
Bootstrap 5 सभी प्रमुख ब्राउज़रों और प्लेटफॉर्मों के नवीनतम स्थिर संस्करण का समर्थन करता है। लेकिन, इसका इस्तेमाल Internet Explorer 11 और उससे पुराने संस्करणों को समर्थन नहीं किया जाता है。
Bootstrap 5 और Bootstrap 3 & 4 के बीच प्रमुख अंतर यह है कि Bootstrap 5 जूनियर जावास्क्रिप्ट के लिए बदल गया है न कि जेक्वेरी के लिए।
टिप्पणी:उसकी टीम अभी भी Bootstrap 3 और Bootstrap 4 के महत्वपूर्ण त्रुटि निवारण और दस्तावेज़ संशोधन का समर्थन करती है, इनका इस्तेमाल करना पूरी तरह से सुरक्षित है। लेकिन उनमें कोई नई विशेषताएँ जोड़ी नहीं जाएगी。
क्यों Bootstrap का इस्तेमाल करें?
Bootstrap के लाभ:
- आसानता:किसी भी एचटीएमएल और सीएसएस के बुनियादी ज्ञान के होने वाले व्यक्ति को तुरंत Bootstrap का इस्तेमाल करना होगा
- प्रतिक्रियाशील विशेषताएँ:Bootstrap का प्रतिक्रियाशील CSS मोबाइल, टैबलेट और डेस्कटॉप के लिए समायोजित किया जा सकता है
- मोबाइल पहल विधि:Bootstrap में, मोबाइल पहल शैली उसके मुख्य फ्रेमवर्क का हिस्सा है
- ब्राउज़र संगति:Bootstrap 5 सभी आधुनिक ब्राउज़रों (Chrome, Firefox, Edge, Safari और Opera) से संगत है।
ध्यान:अगर आपको IE11 और उससे पुरानी संस्करण का समर्थन करने की आवश्यकता है, तो आपको BS4 या BS3 का इस्तेमाल करना होगा。
Bootstrap 5 कहाँ से प्राप्त करें?
आपके अपने साइट पर Bootstrap 5 का इस्तेमाल करने के लिए दो तरीके हैं।
आप कर सकते हैं:
- CDN से बूटस्ट्रैप 5 शामिल
- getbootstrap.com से बूटस्ट्रैप 5 डाउनलोड करें
बूटस्ट्रैप 5 CDN
अगर आप बूटस्ट्रैप 5 को खुद डाउनलोड करना और तौतिक करना नहीं चाहते, तो इसे CDN (कंटेंट डिलीवरी नेटवर्क) से उद्धृत कर सकते हैं।
CodeW3C.com बूटस्ट्रैप के सीएसएस और जावास्क्रिप्ट के लिए CDN सहायता प्रदान करता है:
MaxCDN:
<!-- सर्वश्रेष्ठ समय बाद संयोजित और कम्प्रेस्ड सीएसएस --> <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet"> <!-- सर्वश्रेष्ठ समय बाद संयोजित जावास्क्रिप्ट --> <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
बूटस्ट्रैप 5 CDN का एक फायदा है:
अनेक उपयोगकर्ता जावास्क्रिप्ट डेलीवर जेलर से बूटस्ट्रैप 5 को डाउनलोड कर चुके हैं। इसलिए जब वे आपके वेबसाइट पर आते हैं, तो यह कैश में से लोड होता है, जिससे लोड वक्त घटता है। इसके अलावा, अधिकांश CDN यह सुनिश्चित करेंगे कि जब उपयोगकर्ता फ़ाइल की अनुरोध करता है, तो यह उसके निकटतम सर्वर से सेवा प्रदान करता है, जिससे लोड वक्त और अधिक तेज होता है।
जावास्क्रिप्ट?
बूटस्ट्रैप 5 विभिन्न कंपोनेंट (जैसे मोडल, टूलटिप, पॉपअप आदि) के लिए जावास्क्रिप्ट का उपयोग करता है। लेकिन अगर आपको केवल बूटस्ट्रैप के सीएसएस भाग का उपयोग करना है, तो उन्हें नहीं चाहिए।
बूटस्ट्रैप 5 डाउनलोड करें
अगर आप बूटस्ट्रैप 5 को खुद डाउनलोड करना और तौतिक करना चाहते हैं, तो https://getbootstrap.com/फिर वहां के निर्देशों का अनुसरण करें
अपना पहला वेब पृष्ठ बूटस्ट्रैप 5 से बनाएं
1. HTML5 डॉक्यूमेंट टाइप जोड़ें
बूटस्ट्रैप 5 एचटीएमएल एलीमेंट और सीएसएस एट्रिब्यूट्स का उपयोग करता है जो HTML5 डॉक्यूमेंट टाइप की आवश्यकता है।
हमेशा HTML5 डॉक्यूमेंट टाइप शामिल करें, तथा lang अटिबाती, सही शीर्षक और चारकीसेट:
<!DOCTYPE html>
<html lang="en">
<head>
<title>बूटस्ट्रैप 5 इंस्टेंस</title>
<meta charset="utf-8">
</head>
</html>
2. बूटस्ट्रैप 5 मोबाइल प्राथमिकता
बूटस्ट्रैप 5 का डिजाइन लक्ष्य रिस्पोन्सिव मोबाइल डिवाइस है। मोबाइल प्राथमिकता वाली साइलेस निरंतर फ्रेमवर्क के एक हिस्सा है।
सही रेंडरिंग और टच स्केलिंग को प्रभावित करने के लिए <head> एलीमेंट के अंदर निम्नलिखित को जोड़ें <meta> टैग:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width पृष्ठ की चौड़ाई को डिवाइस के screen-width (डिवाइस द्वारा भिन्न हो सकता है) से अनुसरण करने के लिए सेट करता है।
initial-scale=1 ब्राउज़र के पहली बार पृष्ठ लोड होने पर प्रारंभिक जीयूएस स्केल सेट करता है।
3. कंटेनर
बूटस्ट्रैप 5 को साइट के सामग्री को पैक करने के लिए एक एलीमेंट की आवश्यकता है।
दो कंटेनर वर्ग चुने जा सकते हैं:
.containerवर्ग एक प्रतिक्रियाशील निर्धारित चौड़ाई के कंटेनर प्रदान करता है.container-fluidवर्ग एक पूर्ण चौड़ाई का कंटेनर प्रदान करता है, जो पूरे विन्दु की चौड़ाई को छापता है
दो बुनियादी बूटस्ट्रैप 5 पृष्ठ
कंटेनर इंस्टेंस
नीचे दिए गए नमूने में बुनियादी बूटस्ट्रैप 5 पृष्ठ (प्रतिक्रियाशील निर्धारित चौड़ाई के कंटेनर) के कोड को दिखाया गया है:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap इंस्टेंस</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet"> <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script> </head> <body> <div class="container"> <h1>मेरा पहला बूटस्ट्रैप पृष्ठ</h1> <p>यह भाग .container वर्ग में है。</p> <p>.container वर्ग एक प्रतिक्रियाशील निर्धारित चौड़ाई के कंटेनर प्रदान करता है。</p> </div> </body> </html>
कंटेनर फ्लुइड इंस्टेंस
नीचे दिए गए नमूने में बुनियादी बूटस्ट्रैप 5 पृष्ठ (समपूर्ण चौड़ाई के कंटेनर) के कोड को दिखाया गया है:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap इंस्टेंस</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet"> <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script> </head> <body> <div class="container-fluid"> <h1>मेरा पहला बूटस्ट्रैप पृष्ठ</h1> <p>यह भाग .container-fluid वर्ग में है。</p> <p>.container-fluid वर्ग के साथ पूर्ण चौड़ाई का कंटेनर प्रदान करता है, जो पूरे विन्दु की चौड़ाई को छापता है。</p> </div> </body> </html>
- पिछला पृष्ठ BS5 ट्यूटोरियल
- अगला पृष्ठ BS5 कंटेनर
