मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
in English

परिचय

jsDelivr आरू एक टेम्पलेट स्टार्टर पृष्ठ के साथ, उत्तरदायी, मोबाइल-प्रथम साइट बनाबै लेली दुनिया केरऽ सबसे लोकप्रिय ढाँचा, बूटस्ट्रैप स॑ शुरू करऽ ।

इस पेज पर

त्वरित शुरुआत

जल्दी स अपन प्रोजेक्ट मे बूटस्ट्रैप जोड़य चाहैत छी? jsDelivr, एकटा मुफ्त ओपन सोर्स सीडीएन क उपयोग करू. पैकेज प्रबंधक कें उपयोग करनाय या स्रोत फाइल डाउनलोड करय कें जरूरत छै? डाउनलोड पृष्ठ पर जाउ .

सीएसएस

हमर CSS लोड करय लेल अन्य सब स्टाइलशीट सं पहिने <link>अपन स्टाइलशीट के कॉपी-पेस्ट करू .<head>

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

जे एस

हमरऽ बहुत सारा घटकऽ क॑ काम करै लेली जावास्क्रिप्ट केरऽ उपयोग के जरूरत छै । विशेष रूप स, हुनका सब कए हमर अपन जावास्क्रिप्ट प्लगइन आ पॉपर क आवश्यकता अछि . अपनऽ पन्ना केरऽ अंत के पास, बंद करै वाला टैग स॑ ठीक पहिने, निम्नलिखित म॑ स॑ एक <script>s क॑</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">, त कृपया हमर बूटस्ट्रैप कें मॉड्यूल कें रूप मे उपयोग करय वाला खंड कें देखू.

घटक

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

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

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

अपन पन्ना नवीनतम डिजाइन आ विकास मानक के संग सेटअप अवश्य करू. मतलब छै कि 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>

अगिला चरणक लेल, अपन साइट के सामग्री आ घटक के बिछाबय के शुरू करय लेल लेआउट डॉक्स या हमर आधिकारिक उदाहरण पर जाउ.

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

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

एचटीएमएल 5 डॉक्टटाइप

बूटस्ट्रैप क' लेल HTML5 डॉकटाइप क' उपयोग करबाक आवश्यकता अछि. एकरा बिना अहां के किछ फंकी अधूरा स्टाइलिंग देखय लेल मिलत, मुदा एकरा शामिल करय सं कोनो काफी हिचकी नहिं हेबाक चाही.

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

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

Bootstrap is developed mobile first , एक रणनीति जइ मे हम मोबाइल डिवाइस कें लेल कोड कें पहिले अनुकूलित करय छै आ ओकरा बाद CSS मीडिया क्वेरी कें उपयोग करयत आवश्यक रूप सं घटक कें स्केल अप करय छै. सब डिवाइस क लेल उचित रेंडरिंग आओर टच ज़ूमिंग सुनिश्चित करबाक लेल, अपन <head>.

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

एकर उदाहरण अहाँ स्टार्टर टेम्पलेट मे क्रिया मे देखि सकैत छी .

बॉक्स-साइजिंग

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

दुर्लभ अवसर पर जखन अहाँ एकरा ओवरराइड करबाक आवश्यकता अछि, निम्नलिखित तरहक किछु प्रयोग करू:

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

उपरोक्त स्निपेट कें साथ, नेस्टेड तत्व-जइ मे ::beforeआ माध्यम सं उत्पन्न सामग्री शामिल छै-सब कें लेल ::afterनिर्दिष्ट कें विरासत मे लेतय .box-sizing.selector-for-some-widget

बॉक्स मॉडल आ साइजिंग के बारे मे बेसी जानू CSS Tricks पर .

रिबूट करू

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

समुदाय

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

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

नवीनतम गपशप आ लाजवाब म्यूजिक वीडियो के लेल ट्विटर पर @getbootstrap के सेहो फॉलो क सकय छी .