बूटस्ट्रैप के साथ शुरू करू

बूटस्ट्रैप एकटा शक्तिशाली, फीचर-पैक फ्रंटएंड टूलकिट छै. किछुओ बनाउ-प्रोटोटाइप सँ ल' क' प्रोडक्शन धरि-मिनिट मे।

इस पेज पर

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

बिना कोनों बिल्ड स्टेप कें आवश्यकता कें सीडीएन कें माध्यम सं बूटस्ट्रैप कें उत्पादन-तैयार सीएसएस आ जावास्क्रिप्ट कें शामिल करयत शुरू करूं. एकरा व्यवहार मे देखू एहि बूटस्ट्रैप कोडपेन डेमो के संग .

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 कें लेल, आ <link>हमर जावास्क्रिप्ट बंडल कें लेल टैग (ड्रॉपडाउन, पॉपर, आ टूलटिप्स कें स्थिति कें लेल पॉपर सहित) बंद करय सं पहिने राखू . हमर सीडीएन लिंक के बारे में बेसी जानू .<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`

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

अगिला चरण

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

जे एस घटक

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

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

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

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

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

एचटीएमएल 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 पर .

रिबूट करू

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

समुदाय

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

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

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