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

बूटस्ट्रैप एक शक्तिशाली, फीचर-पैक फ्रंटएंड टूलकिट है। कुछ भी बनाएं—प्रोटोटाइप से लेकर प्रोडक्शन तक—मिनटों में।

इस पृष्ठ पर

जल्दी शुरू

बूटस्ट्रैप के उत्पादन के लिए तैयार सीएसएस और जावास्क्रिप्ट को सीडीएन के माध्यम से बिना किसी निर्माण चरणों की आवश्यकता के शामिल करके आरंभ करें। इसे इस बूटस्ट्रैप कोडपेन डेमो के साथ व्यवहार में देखें ।

index.htmlअपने प्रोजेक्ट रूट में एक नई फाइल बनाएं । मोबाइल उपकरणों में उचित प्रतिक्रियाशील व्यवहार<meta name="viewport"> के लिए टैग भी शामिल करें ।
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

बूटस्ट्रैप के CSS और JS को शामिल करें। बंद होने से पहले हमारे CSS के लिए टैग <link>और हमारे JavaScript बंडल के लिए टैग (पॉपर पोजिशनिंग ड्रॉपडाउन, पॉपपर्स और टूलटिप्स सहित) रखें । हमारे सीडीएन लिंक के बारे में और जानें ।<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

सीडीएन लिंक

संदर्भ के रूप में, यहां हमारे प्राथमिक सीडीएन लिंक हैं।

विवरण	यूआरएल
सीएसएस	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
जे एस	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

आप सामग्री पृष्ठ में सूचीबद्ध हमारे किसी भी अतिरिक्त बिल्ड को लाने के लिए सीडीएन का उपयोग कर सकते हैं ।

अगले कदम

बूटस्ट्रैप द्वारा उपयोग की जाने वाली कुछ महत्वपूर्ण वैश्विक परिवेश सेटिंग्स के बारे में कुछ और पढ़ें ।
हमारे सामग्री अनुभाग में बूटस्ट्रैप में क्या शामिल है और जावास्क्रिप्ट की आवश्यकता वाले घटकों की सूची के बारे में नीचे पढ़ें।
थोड़ी और शक्ति चाहिए? पैकेज प्रबंधक के माध्यम से स्रोत फ़ाइलों को शामिल करके बूटस्ट्रैप के साथ निर्माण पर विचार करें ।
के साथ एक मॉड्यूल के रूप में बूटस्ट्रैप का उपयोग करना चाहते हैं <script type="module">? कृपया हमारे बूटस्ट्रैप को एक मॉड्यूल अनुभाग के रूप में देखें।

जेएस घटक

उत्सुक हैं कि किन घटकों को स्पष्ट रूप से हमारे जावास्क्रिप्ट और पॉपर की आवश्यकता है? नीचे शो कंपोनेंट्स लिंक पर क्लिक करें। यदि आप सामान्य पृष्ठ संरचना के बारे में बिल्कुल भी अनिश्चित हैं, तो उदाहरण पृष्ठ टेम्पलेट के लिए पढ़ते रहें।

जावास्क्रिप्ट की आवश्यकता वाले घटक दिखाएं

खारिज करने के लिए अलर्ट
राज्यों को टॉगल करने के लिए बटन और चेकबॉक्स/रेडियो कार्यक्षमता
सभी स्लाइड व्यवहारों, नियंत्रणों और संकेतकों के लिए हिंडोला
सामग्री की दृश्यता टॉगल करने के लिए संक्षिप्त करें
प्रदर्शित करने और स्थिति के लिए ड्रॉपडाउन ( पॉपर की भी आवश्यकता है )
प्रदर्शन, स्थिति और स्क्रॉल व्यवहार के लिए मोडल
प्रतिक्रियाशील व्यवहारों को लागू करने के लिए हमारे संक्षिप्त और ऑफकैनवास प्लगइन्स को विस्तारित करने के लिए नेवबार
सामग्री पैन को टॉगल करने के लिए टैब प्लगइन के साथ एनएवी
प्रदर्शन, स्थिति और स्क्रॉल व्यवहार के लिए ऑफकैनवास
स्क्रॉल व्यवहार और नेविगेशन अपडेट के लिए स्क्रॉलस्पाई
प्रदर्शित करने और खारिज करने के लिए टोस्ट
प्रदर्शित करने और स्थिति निर्धारण के लिए टूलटिप्स और पॉपओवर ( पॉपर की भी आवश्यकता है )

महत्वपूर्ण ग्लोबल्स

बूटस्ट्रैप मुट्ठी भर महत्वपूर्ण वैश्विक शैलियों और सेटिंग्स को नियोजित करता है, जिनमें से सभी लगभग विशेष रूप से क्रॉस ब्राउज़र शैलियों के सामान्यीकरण की दिशा में तैयार हैं। चलो गोता लगाएँ।

HTML5 सिद्धांत

बूटस्ट्रैप को HTML5 सिद्धांत के उपयोग की आवश्यकता होती है। इसके बिना, आप कुछ फंकी और अधूरी स्टाइल देखेंगे।

<!doctype html>
<html lang="en">
  ...
</html>

उत्तरदायी मेटा टैग

बूटस्ट्रैप को पहले मोबाइल विकसित किया गया है , एक रणनीति जिसमें हम पहले मोबाइल उपकरणों के लिए कोड अनुकूलित करते हैं और फिर सीएसएस मीडिया प्रश्नों का उपयोग करके आवश्यक घटकों को स्केल करते हैं। उचित रेंडरिंग सुनिश्चित करने और सभी उपकरणों के लिए ज़ूमिंग स्पर्श करने के लिए, अपने में प्रतिक्रियाशील व्यूपोर्ट मेटा टैग जोड़ें <head>।

<meta name="viewport" content="width=device-width, initial-scale=1">

आप त्वरित शुरुआत में इसका एक उदाहरण कार्रवाई में देख सकते हैं ।

बॉक्स आकार

CSS में अधिक सरल आकार के लिए, हम वैश्विक box-sizingमान को से पर स्विच करते content-boxहैं border-box। यह सुनिश्चित paddingकरता है कि किसी तत्व की अंतिम गणना की गई चौड़ाई को प्रभावित नहीं करता है, लेकिन यह Google मानचित्र और Google कस्टम खोज इंजन जैसे कुछ तृतीय-पक्ष सॉफ़्टवेयर के साथ समस्याएं पैदा कर सकता है।

दुर्लभ अवसर पर आपको इसे ओवरराइड करने की आवश्यकता होती है, निम्न की तरह कुछ उपयोग करें:

.selector-for-some-widget {
  box-sizing: content-box;
}

उपरोक्त स्निपेट के साथ, नेस्टेड तत्व—के माध्यम से उत्पन्न सामग्री सहित— ::beforeऔर — ::afterसभी उसके लिए निर्दिष्ट इनहेरिट box-sizingकरेंगे .selector-for-some-widget।

CSS ट्रिक्स पर बॉक्स मॉडल और साइज़िंग के बारे में अधिक जानें ।

रीबूट

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

समुदाय

बूटस्ट्रैप के विकास पर अप-टू-डेट रहें और इन सहायक संसाधनों के साथ समुदाय तक पहुंचें।

आधिकारिक बूटस्ट्रैप ब्लॉग पढ़ें और सदस्यता लें ।
हमारे GitHub चर्चाओं को पूछें और एक्सप्लोर करें ।
आईआरसी में साथी बूटस्ट्रैपर्स के साथ चैट करें। irc.libera.chatसर्वर पर , #bootstrapचैनल में।
कार्यान्वयन सहायता स्टैक ओवरफ़्लो (टैग की गई bootstrap-5) पर मिल सकती है।
डेवलपर्स को उन पैकेजों पर कीवर्ड का उपयोग करना चाहिए जो एनपीएम या समान वितरण तंत्र के माध्यम से अधिकतम खोज के लिए bootstrapवितरित करते समय बूटस्ट्रैप की कार्यक्षमता को संशोधित या जोड़ते हैं ।

नवीनतम गपशप और भयानक संगीत वीडियो के लिए आप ट्विटर पर @getbootstrap का भी अनुसरण कर सकते हैं ।