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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

जे एस

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

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

बंडल

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

बक्खरा

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

घटक ऐ

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

जावास्क्रिप्ट दी लोड़ आह् ले घटक दस्सो

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

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

अपने पन्नें गी नवीनतम डिजाइन ते विकास मानकें कन्नै सेट करना सुनिश्चित करो। मतलब ऐ जे इक 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 तत्वें गी थोह् ड़ी-मती राय आह् ले रीसेट उपलब्ध करोआने दे कन्नै-कन्नै ब्राउज़रें ते डिवाइसें च असंगतिएं गी ठीक करने आस्तै रिबूट दा इस्तेमाल करदे आं।

समुदाय

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

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

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

सीएसपी ते एम्बेडेड एसवीजी

कई बूटस्ट्रैप घटकें च ब्राउज़रें ते डिवाइसें च घटकें गी लगातार ते आसानी कन्नै शैली करने आस्तै साढ़े CSS च एम्बेडेड एसवीजी शामल न। होर सख्त CSP विन्यास आह् ले संगठनें आस्तै , असें अपने एम्बेडेड एसवीजी दे सारे उदाहरणें दा दस्तावेजीकरण कीता ऐ (जेह् ड़े सारे ) दे राहें लागू कीते जंदे न background-image) तां जे तुस अपने विकल्पें दी होर पूरी चाल्ली समीक्षा करी सकदे ओ.

बंद बटन (अलर्ट ते मोडल च इस्तेमाल कीता जंदा ऐ)
कस्टम चेकबॉक्स ते रेडियो बटन
फार्म स्विच करदा ऐ
प्रमाणीकरण आइकन बनाओ
कस्टम चयन मेनू
हिंडोला नियंत्रण करदा ऐ
नवबार टॉगल बटन

समुदाय दी गल्लबात दे आधार उप्पर , अपने खुद दे कोडबेस च इसगी संबोधित करने आस्तै किश विकल्पें च यूआरएल गी स् थानीय रूप कन्नै होस्ट कीती गेदी संपत्तियें कन्नै बदलना , छवियें गी हटाना ते इनलाइन छवियें दा इस्तेमाल करना (सभनें घटकें च संभव नेईं ऐ ), ते अपने सीएसपी गी संशोधित करना शामल ऐ साढ़ी सिफारिश ऐ जे तुस अपनी खुद दी सुरक्षा नीतियें दी सावधानी कन्नै समीक्षा करो ते जेकर लोड़चदा ऐ तां अग्गें बधने दा इक बेहतरीन रस्ता फैसला करो।