in English

परिचे

बूटस्ट्रैप कन्नै शुरू करो, जेह् ड़ा उत्तरदायी, मोबाइल-पैह् ली साइटें गी बनाने आस्तै दुनिया दा सबनें थमां लोकप्रिय ढांचे ऐ, jsDelivr ते इक टेम्पलेट स्टार्टर पृष्ठ कन्नै।

जल्दी शुरू करो

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

सीएसएस दा

साढ़े CSS लोड करने आस्तै बाकी सारे स्टाइलशीटें थमां पैह् ले स्टाइलशीट <link>गी अपने च कॉपी-पेस्ट करो ।<head>

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

जे एस

साढ़े मते सारे घटकें गी कम्म करने आस्तै जावास्क्रिप्ट दा इस्तेमाल करने दी लोड़ होंदी ऐ। खास तौर पर, उनेंगी jQuery , Popper.js , ते साढ़े अपने जावास्क्रिप्ट प्लगइन्स दी लोड़ ऐ। अस jQuery दा स्लिम बिल्ड दा इस्तेमाल करदे आं , पर पूरा संस्करण बी समर्थत ऐ।

अपने पन्नें दे अंत दे कोल, बंद करने आह् ले टैग थमां ठीक पैह् ले, निम्नलिखित च इक गी<script> रक्खो तां जे उनेंगी सक्षम कीता जाई सकै। </body>jQuery पैह्ले आना चाहिदा, फिर Popper.js, ते फिर साढ़े जावास्क्रिप्ट प्लगइन्स।

बंडल

साढ़े बंडल कन्नै इक स्क्रिप्ट च तुंदी लोड़चदी हर चीज शामल करो। साढ़ा bootstrap.bundle.jsते पॉपरbootstrap.bundle.min.js शामल ऐ , पर jQuery नेईं . बूटस्ट्रैप च केह् शामल ऐ इसदे बारे च होर मती जानकारी आस्तै कृपा करियै साढ़ा सामग्री खंड दिक्खो.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

बक्खरा

जेकर तुस बक्ख-बक्ख स्क्रिप्टें दे समाधान कन्नै जाने दा फैसला करदे ओ तां Popper.js गी पैह् ले औना लोड़चदा ऐ, ते उसदे बाद साढ़े जावास्क्रिप्ट प्लगइन्स।

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

घटक ऐ

उत्सुक ऐ जे कुन कुन घटकें गी स्पश्ट रूप कन्नै jQuery, साढ़े जेएस, ते Popper.js दी लोड़ ऐ? हेठ दित्ते गेदे शो घटक लिंक पर क्लिक करो। जेकर तुस पृष्ठ संरचना दे बारे च अनिश्चित ओ तां इक उदाहरण पृष्ठ टेम्पलेट आस्तै पढ़दे रौह्ओ.

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

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

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

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

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

समग्र पृष्ठ दी जरूरतें लेई तुसेंगी एह् गै लोड़चदा ऐ। अपनी साइट दी सामग्री ते घटकें गी लेआउट करना शुरू करने आस्तै लेआउट डॉक्स जां साढ़े आधिकारिक उदाहरणें पर जाओ ।

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

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

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

बूटस्ट्रैप गी HTML5 डॉकटाइप दा इस्तेमाल करने दी लोड़ ऐ. इसदे बिना, तुसें गी कुछ फंकी अधूरी स्टाइलिंग दिक्खने गी मिलग, पर इसगी शामल करने कन्नै कोई काफी हिचकी नेईं होनी चाहिदी।

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

तुस इसदा इक उदाहरण स्टार्टर टेम्पलेट च कार्रवाई च दिक्खी सकदे ओ .

बॉक्स-साइज करना

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

समुदाय

बूटस्ट्रैप दे विकास बारै जानकारी रक्खो ते इनें मददगार संसाधनें कन्नै समुदाय तगर पुज्जो।

तुस ट्विटर पर @getbootstrap गी बी नवीनतम गपशप ते लाजवाब म्यूजिक वीडियो लेई फॉलो करी सकदे ओ।