बूटस्ट्रैप प्रारंभ करें
बूटस्ट्रैप क्या है?
- बूटस्ट्रैप तेज़ और आसान वेब विकास के लिए एक मुफ़्त फ्रंट-एंड फ्रेमवर्क है
- बूटस्ट्रैप में टाइपोग्राफी, फॉर्म, बटन, टेबल, नेविगेशन, मोडल, इमेज कैरोसेल और कई अन्य के साथ-साथ वैकल्पिक जावास्क्रिप्ट प्लगइन्स के लिए HTML और CSS आधारित डिज़ाइन टेम्प्लेट शामिल हैं।
- बूटस्ट्रैप आपको आसानी से उत्तरदायी डिज़ाइन बनाने की क्षमता भी देता है
उत्तरदायी वेब डिज़ाइन क्या है?
रिस्पॉन्सिव वेब डिज़ाइन ऐसी वेब साइट्स बनाने के बारे में है जो छोटे फ़ोन से लेकर बड़े डेस्कटॉप तक, सभी डिवाइसों पर अच्छा दिखने के लिए अपने आप को अपने आप एडजस्ट कर लेती हैं।
बूटस्ट्रैप उदाहरण
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum
dolor..</p>
</div>
</div>
</div>
बूटस्ट्रैप इतिहास
बूटस्ट्रैप को ट्विटर पर मार्क ओटो और जैकब थॉर्नटन द्वारा विकसित किया गया था, और अगस्त 2011 में गिटहब पर एक ओपन सोर्स उत्पाद के रूप में जारी किया गया था।
जून 2014 में बूटस्ट्रैप GitHub पर नंबर 1 प्रोजेक्ट था!
बूटस्ट्रैप का उपयोग क्यों करें?
बूटस्ट्रैप के लाभ:
- प्रयोग करने में आसान: HTML और CSS का केवल बुनियादी ज्ञान रखने वाला कोई भी व्यक्ति बूटस्ट्रैप का उपयोग शुरू कर सकता है
- उत्तरदायी विशेषताएं: बूटस्ट्रैप का उत्तरदायी सीएसएस फोन, टैबलेट और डेस्कटॉप पर समायोजित हो जाता है
- मोबाइल-फर्स्ट अप्रोच: बूटस्ट्रैप 3 में, मोबाइल-फर्स्ट स्टाइल कोर फ्रेमवर्क का हिस्सा हैं
- ब्राउज़र संगतता: बूटस्ट्रैप सभी आधुनिक ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर, एज, सफारी और ओपेरा) के साथ संगत है।
बूटस्ट्रैप संस्करण
यह ट्यूटोरियल बूटस्ट्रैप 3 का अनुसरण करता है , जो 2013 में जारी किया गया था। हालाँकि, हम नए संस्करणों को भी कवर करते हैं; बूटस्ट्रैप 4 (रिलीज़ 2018) और बूटस्ट्रैप 5 (रिलीज़ 2021) ।
बूटस्ट्रैप 5 बूटस्ट्रैप का नवीनतम संस्करण है ; नए घटकों, तेज स्टाइलशीट, अधिक प्रतिक्रियात्मकता आदि के साथ। यह सभी प्रमुख ब्राउज़रों और प्लेटफार्मों के नवीनतम, स्थिर रिलीज का समर्थन करता है। हालाँकि, Internet Explorer 11 और डाउन समर्थित नहीं है।
बूटस्ट्रैप 5 और बूटस्ट्रैप 3 और 4 के बीच मुख्य अंतर यह है कि बूटस्ट्रैप 5 ने jQuery के बजाय जावास्क्रिप्ट पर स्विच किया है ।
नोट: बूटस्ट्रैप 3 और बूटस्ट्रैप 4 अभी भी महत्वपूर्ण बग फिक्स और दस्तावेज़ीकरण परिवर्तनों के लिए टीम द्वारा समर्थित हैं, और उनका उपयोग जारी रखना पूरी तरह से सुरक्षित है। हालाँकि, उनमें नई सुविधाएँ नहीं जोड़ी जाएँगी।
बूटस्ट्रैप कहाँ से प्राप्त करें?
अपनी वेब साइट पर बूटस्ट्रैप का उपयोग शुरू करने के दो तरीके हैं।
आप ऐसा कर सकते हैं:
- getbootstrap.com से बूटस्ट्रैप डाउनलोड करें
- एक सीडीएन से बूटस्ट्रैप शामिल करें
बूटस्ट्रैप डाउनलोड कर रहा है
यदि आप बूटस्ट्रैप को स्वयं डाउनलोड और होस्ट करना चाहते हैं, तो getbootstrap.com पर जाएं , और वहां दिए गए निर्देशों का पालन करें।
बूटस्ट्रैप सीडीएन
यदि आप बूटस्ट्रैप को स्वयं डाउनलोड और होस्ट नहीं करना चाहते हैं, तो आप इसे सीडीएन (सामग्री वितरण नेटवर्क) से शामिल कर सकते हैं।
मैक्ससीडीएन बूटस्ट्रैप के सीएसएस और जावास्क्रिप्ट के लिए सीडीएन समर्थन प्रदान करता है। आपको jQuery भी शामिल करना होगा:
मैक्ससीडीएन:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
बूटस्ट्रैप सीडीएन का उपयोग करने का एक फायदा:
कई उपयोगकर्ता पहले से ही मैक्ससीडीएन से बूटस्ट्रैप डाउनलोड कर चुके हैं, जब वे किसी अन्य साइट पर जाते हैं। परिणामस्वरूप, जब वे आपकी साइट पर आएंगे तो इसे कैशे से लोड किया जाएगा, जिससे लोडिंग समय तेज हो जाता है। साथ ही, अधिकांश सीडीएन यह सुनिश्चित करेंगे कि एक बार जब कोई उपयोगकर्ता इससे फ़ाइल का अनुरोध करता है, तो उसे उनके निकटतम सर्वर से परोसा जाएगा, जिससे लोडिंग समय भी तेज हो जाता है।
jQuery
बूटस्ट्रैप जावास्क्रिप्ट प्लगइन्स (जैसे मोडल, टूलटिप्स, आदि) के लिए jQuery का उपयोग करता है। हालाँकि, यदि आप बूटस्ट्रैप के CSS भाग का उपयोग करते हैं, तो आपको jQuery की आवश्यकता नहीं है।
बूटस्ट्रैप के साथ पहला वेब पेज बनाएं
1. HTML5 सिद्धांत जोड़ें
बूटस्ट्रैप HTML तत्वों और CSS गुणों का उपयोग करता है जिनके लिए HTML5 सिद्धांत की आवश्यकता होती है।
लैंग विशेषता और सही वर्ण सेट के साथ, पृष्ठ की शुरुआत में हमेशा HTML5 सिद्धांत शामिल करें:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. बूटस्ट्रैप 3 मोबाइल-फर्स्ट है
बूटस्ट्रैप 3 को मोबाइल उपकरणों के लिए उत्तरदायी होने के लिए डिज़ाइन किया गया है। मोबाइल-प्रथम शैलियाँ मुख्य ढांचे का हिस्सा हैं।
उचित प्रतिपादन सुनिश्चित करने और ज़ूमिंग स्पर्श करने के लिए, तत्व <meta>के अंदर निम्न टैग
जोड़ें <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
डिवाइस की width=device-widthस्क्रीन-चौड़ाई का पालन करने के लिए भाग पृष्ठ की चौड़ाई निर्धारित करता है (जो डिवाइस के आधार पर अलग-अलग होगा)।
initial-scale=1जब पृष्ठ पहली बार ब्राउज़र द्वारा लोड किया जाता है तो यह भाग प्रारंभिक ज़ूम स्तर सेट करता है।
3. कंटेनर
बूटस्ट्रैप को साइट सामग्री को लपेटने के लिए एक युक्त तत्व की भी आवश्यकता होती है।
चुनने के लिए दो कंटेनर वर्ग हैं:
.containerवर्ग एक उत्तरदायी निश्चित चौड़ाई वाला कंटेनर प्रदान करता है- व्यूपोर्ट की पूरी चौड़ाई में फैले
.container-fluidवर्ग एक पूर्ण चौड़ाई वाला कंटेनर प्रदान करता है
दो मूल बूटस्ट्रैप पृष्ठ
निम्न उदाहरण एक मूल बूटस्ट्रैप पृष्ठ के लिए कोड दिखाता है (एक प्रतिक्रियाशील निश्चित चौड़ाई कंटेनर के साथ):
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
निम्न उदाहरण मूल बूटस्ट्रैप पृष्ठ के लिए कोड दिखाता है (पूर्ण चौड़ाई वाले कंटेनर के साथ):
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>