मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

परिचय

बूटस्ट्रैप के साथ आरंभ करें, जो उत्तरदायी, मोबाइल-प्रथम साइट बनाने के लिए दुनिया का सबसे लोकप्रिय ढांचा है, जिसमें jsDelivr और एक टेम्प्लेट स्टार्टर पेज है।

इस पृष्ठ पर

जल्दी शुरू

अपने प्रोजेक्ट में बूटस्ट्रैप को शीघ्रता से जोड़ना चाहते हैं? jsDelivr का उपयोग करें, एक मुक्त खुला स्रोत सीडीएन। पैकेज प्रबंधक का उपयोग करना या स्रोत फ़ाइलों को डाउनलोड करने की आवश्यकता है? डाउनलोड पेज पर जाएं ।

सीएसएस

हमारे सीएसएस को लोड करने के लिए स्टाइलशीट को अन्य सभी स्टाइलशीट से पहले कॉपी-पेस्ट करें <link>।<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

जे एस

हमारे कई घटकों को कार्य करने के लिए जावास्क्रिप्ट के उपयोग की आवश्यकता होती है। विशेष रूप से, उन्हें हमारे अपने जावास्क्रिप्ट प्लगइन्स और पॉपर की आवश्यकता होती है । निम्नलिखित में से किसी एक को<script> अपने पृष्ठों के अंत में, क्लोजिंग टैग के ठीक पहले ,</body> उन्हें सक्षम करने के लिए रखें।

बंडल

हमारे दो बंडलों में से एक के साथ प्रत्येक बूटस्ट्रैप जावास्क्रिप्ट प्लगइन और निर्भरता शामिल करें। दोनों bootstrap.bundle.jsऔर हमारे टूलटिप्स और पॉपओवर के लिए पॉपरbootstrap.bundle.min.js शामिल करें। बूटस्ट्रैप में क्या शामिल है, इसके बारे में अधिक जानकारी के लिए, कृपया हमारा सामग्री अनुभाग देखें।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

अलग

यदि आप अलग स्क्रिप्ट समाधान के साथ जाने का निर्णय लेते हैं, तो पॉपर पहले आना चाहिए (यदि आप टूलटिप्स या पॉपओवर का उपयोग कर रहे हैं), और फिर हमारे जावास्क्रिप्ट प्लगइन्स।

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

मॉड्यूल

यदि आप उपयोग करते हैं <script type="module">, तो कृपया हमारे बूटस्ट्रैप को मॉड्यूल अनुभाग के रूप में देखें।

अवयव

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

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

स्टार्टर टेम्पलेट

सुनिश्चित करें कि आपके पृष्ठ नवीनतम डिज़ाइन और विकास मानकों के साथ सेट किए गए हैं। इसका अर्थ है एक HTML5 सिद्धांत का उपयोग करना और उचित प्रतिक्रियाशील व्यवहार के लिए व्यूपोर्ट मेटा टैग शामिल करना। यह सब एक साथ रखें और आपके पृष्ठ इस तरह दिखने चाहिए:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

अगले चरणों के लिए, अपनी साइट की सामग्री और घटकों को रखना शुरू करने के लिए लेआउट डॉक्स या हमारे आधिकारिक उदाहरणों पर जाएं।

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

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

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 तत्वों को थोड़ा अधिक रायशुदा रीसेट प्रदान करते हुए ब्राउज़र और डिवाइस में विसंगतियों को ठीक करने के लिए रीबूट का उपयोग करते हैं।

समुदाय

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

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

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