बूटस्ट्रैप से शुरुआत करीं

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

एह पन्ना पर दिहल गइल बा

जल्दी से शुरू होखे के चाहीं

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

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">? कृपया हमनी के बूटस्ट्रैप के मॉड्यूल सेक्शन के रूप में इस्तेमाल करे के देखल जाव।

जेएस घटक के बा

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

जावास्क्रिप्ट के जरूरत वाला घटक देखाईं

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

महत्वपूर्ण ग्लोबल के बा

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

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

बूटस्ट्रैप खातिर एचटीएमएल 5 डॉकटाइप के इस्तेमाल करे के पड़ेला। एकरा बिना कुछ फंकी अवुरी अधूरा स्टाइलिंग देखाई दिही।

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

बॉक्स मॉडल आ साइजिंग के बारे में अउरी जानें सीएसएस ट्रिक्स पर .

रिबूट कइल जाव

बेहतर क्रॉस-ब्राउजर रेंडरिंग खातिर, हमनी के ब्राउजर आ डिवाइस सभ में असंगति के सुधारे खातिर रिबूट के इस्तेमाल करे लीं जबकि आम HTML तत्व सभ के तनिका ढेर राय वाला रीसेट उपलब्ध करावे लीं।

बेरादरी

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

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

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