बूटस्ट्रैप 4 आरंभ करें

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

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

उत्तरदायी वेब डिज़ाइन क्या है?

रिस्पॉन्सिव वेब डिज़ाइन ऐसी वेब साइट्स बनाने के बारे में है जो छोटे फ़ोन से लेकर बड़े डेस्कटॉप तक, सभी डिवाइसों पर अच्छा दिखने के लिए अपने आप को अपने आप एडजस्ट कर लेती हैं।

बूटस्ट्रैप 4 उदाहरण

<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>

बूटस्ट्रैप संस्करण

यह ट्यूटोरियल बूटस्ट्रैप 4 का अनुसरण करता है , जो 2018 में जारी किया गया था, बूटस्ट्रैप 3 के अपग्रेड के रूप में , नए घटकों, तेज स्टाइलशीट, अधिक प्रतिक्रिया, आदि के साथ।

बूटस्ट्रैप 5 (रिलीज़ 2021) बूटस्ट्रैप का नवीनतम संस्करण है ; यह सभी प्रमुख ब्राउज़रों और प्लेटफार्मों की नवीनतम, स्थिर रिलीज़ का समर्थन करता है। हालाँकि, Internet Explorer 11 और डाउन समर्थित नहीं है।

बूटस्ट्रैप 5 और बूटस्ट्रैप 3 और 4 के बीच मुख्य अंतर यह है कि बूटस्ट्रैप 5 ने jQuery के बजाय जावास्क्रिप्ट पर स्विच किया है ।

नोट: बूटस्ट्रैप 3 और बूटस्ट्रैप 4 अभी भी महत्वपूर्ण बग फिक्स और दस्तावेज़ीकरण परिवर्तनों के लिए टीम द्वारा समर्थित हैं, और उनका उपयोग जारी रखना पूरी तरह से सुरक्षित है। हालाँकि, उनमें नई सुविधाएँ नहीं जोड़ी जाएँगी।

बूटस्ट्रैप का उपयोग क्यों करें?

बूटस्ट्रैप के लाभ:

प्रयोग करने में आसान: HTML और CSS का केवल बुनियादी ज्ञान रखने वाला कोई भी व्यक्ति बूटस्ट्रैप का उपयोग शुरू कर सकता है
उत्तरदायी विशेषताएं: बूटस्ट्रैप का उत्तरदायी सीएसएस फोन, टैबलेट और डेस्कटॉप पर समायोजित हो जाता है
मोबाइल-फर्स्ट अप्रोच: बूटस्ट्रैप में, मोबाइल-फर्स्ट स्टाइल कोर फ्रेमवर्क का हिस्सा हैं
ब्राउज़र संगतता: बूटस्ट्रैप 4 सभी आधुनिक ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर 10+, एज, सफारी और ओपेरा) के साथ संगत है।

बूटस्ट्रैप 4 कहाँ से प्राप्त करें?

अपनी वेब साइट पर बूटस्ट्रैप 4 का उपयोग शुरू करने के दो तरीके हैं।

आप ऐसा कर सकते हैं:

एक सीडीएन से बूटस्ट्रैप 4 शामिल करें
Getbootstrap.com से बूटस्ट्रैप 4 डाउनलोड करें

बूटस्ट्रैप 4 सीडीएन

यदि आप बूटस्ट्रैप 4 को स्वयं डाउनलोड और होस्ट नहीं करना चाहते हैं, तो आप इसे सीडीएन (सामग्री वितरण नेटवर्क) से शामिल कर सकते हैं।

jsDelivr बूटस्ट्रैप के सीएसएस और जावास्क्रिप्ट के लिए सीडीएन समर्थन प्रदान करता है। आपको jQuery भी शामिल करना होगा:

जेएसडेलीवर:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

बूटस्ट्रैप 4 सीडीएन का उपयोग करने का एक फायदा:
कई उपयोगकर्ता पहले से ही किसी अन्य साइट पर जाने पर jsDelivr से बूटस्ट्रैप 4 डाउनलोड कर चुके हैं। परिणामस्वरूप, जब वे आपकी साइट पर आएंगे तो इसे कैशे से लोड किया जाएगा, जिससे लोडिंग समय तेज हो जाता है। साथ ही, अधिकांश सीडीएन यह सुनिश्चित करेंगे कि एक बार जब कोई उपयोगकर्ता इससे फ़ाइल का अनुरोध करता है, तो उसे उनके निकटतम सर्वर से परोसा जाएगा, जिससे लोडिंग समय भी तेज हो जाता है।

jQuery और पॉपर?
बूटस्ट्रैप 4 जावास्क्रिप्ट घटकों (जैसे मोडल, टूलटिप्स, पॉपओवर आदि) के लिए jQuery और Popper.js का उपयोग करता है। हालाँकि, यदि आप बूटस्ट्रैप के CSS भाग का उपयोग करते हैं, तो आपको उनकी आवश्यकता नहीं है।

बंद करने योग्य अलर्ट
राज्यों को टॉगल करने के लिए बटन और चेकबॉक्स/रेडियो बटन
स्लाइड, नियंत्रण और संकेतकों के लिए हिंडोला
सामग्री को टॉगल करने के लिए संक्षिप्त करें
Dropdowns (also requires Popper.js for perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates

बूटस्ट्रैप डाउनलोड करना 4

यदि आप बूटस्ट्रैप 4 को स्वयं डाउनलोड और होस्ट करना चाहते हैं, तो https://getbootstrap.com/ पर जाएं और वहां दिए गए निर्देशों का पालन करें।

बूटस्ट्रैप के साथ पहला वेब पेज बनाएं 4

1. HTML5 सिद्धांत जोड़ें

बूटस्ट्रैप 4 HTML तत्वों और CSS गुणों का उपयोग करता है जिन्हें HTML5 सिद्धांत की आवश्यकता होती है।

लैंग विशेषता और सही वर्ण सेट के साथ, पृष्ठ की शुरुआत में हमेशा HTML5 सिद्धांत शामिल करें:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

2. बूटस्ट्रैप 4 मोबाइल-फर्स्ट है

बूटस्ट्रैप 4 को मोबाइल उपकरणों के लिए उत्तरदायी होने के लिए डिज़ाइन किया गया है। मोबाइल-प्रथम शैलियाँ मुख्य ढांचे का हिस्सा हैं।

उचित प्रतिपादन सुनिश्चित करने और ज़ूमिंग स्पर्श करने के लिए, तत्व <meta>के अंदर निम्न टैग जोड़ें <head>:

डिवाइस की width=device-widthस्क्रीन-चौड़ाई का पालन करने के लिए भाग पृष्ठ की चौड़ाई निर्धारित करता है (जो डिवाइस के आधार पर अलग-अलग होगा)।

initial-scale=1जब पृष्ठ पहली बार ब्राउज़र द्वारा लोड किया जाता है तो यह भाग प्रारंभिक ज़ूम स्तर सेट करता है।

3. कंटेनर

बूटस्ट्रैप 4 को साइट सामग्री को लपेटने के लिए एक युक्त तत्व की भी आवश्यकता होती है।

चुनने के लिए दो कंटेनर वर्ग हैं:

.containerवर्ग एक उत्तरदायी निश्चित चौड़ाई वाला कंटेनर प्रदान करता है
व्यूपोर्ट की पूरी चौड़ाई में फैले .container-fluidवर्ग एक पूर्ण चौड़ाई वाला कंटेनर प्रदान करता है

.कंटेनर

.container-द्रव

दो बुनियादी बूटस्ट्रैप 4 पृष्ठ

निम्न उदाहरण मूल बूटस्ट्रैप 4 पृष्ठ के लिए कोड दिखाता है (एक प्रतिक्रियाशील निश्चित चौड़ाई कंटेनर के साथ):

कंटेनर उदाहरण

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

निम्न उदाहरण मूल बूटस्ट्रैप 4 पृष्ठ (पूर्ण चौड़ाई वाले कंटेनर के साथ) के लिए कोड दिखाता है:

कंटेनर द्रव उदाहरण

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

❮ पहले का अगला ❯

बूटस्ट्रैप 4 ट्यूटोरियल

बूटस्ट्रैप 4 ग्रिड

बूटस्ट्रैप 4 अन्य

बूटस्ट्रैप 4 रेफरी