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

परिचय

बूटस्ट्रैप से शुरुआत करीं, ई रिस्पांसिव, मोबाइल-पहिले साइट बनावे खातिर दुनिया के सभसे लोकप्रिय फ्रेमवर्क हवे, jsDelivr आ टेम्पलेट स्टार्टर पन्ना के साथ।

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

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

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

सीएसएस के बा

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

अलहदा

अगर रउआँ अलग-अलग स्क्रिप्ट समाधान के साथ जाए के फैसला करीं, त पॉपर के पहिले आवे के पड़ी (अगर रउआँ टूलटिप भा पॉपओवर के इस्तेमाल कर रहल बानी), आ ओकरा बाद हमनी के जावास्क्रिप्ट प्लगइन।

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

एचटीएमएल 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 के भी फॉलो कर सकेनी ।