in English

परिचय

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

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

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

सीएसएस के बा

हमनी के सीएसएस लोड करे खातिर बाकी सभ स्टाइलशीट से पहिले <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 डॉक्टटाइप के बा

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

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

रिस्पांसिव मेटा टैग के बा

Bootstrap is developed mobile first , एगो रणनीति जवना में हमनी के पहिले मोबाइल डिवाइस खातिर कोड के अनुकूलित करेनी जा आ ओकरा बाद 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) पर मिल सके ला।
  • डेवलपर लोग के एह पैकेज सभ पर कीवर्ड के इस्तेमाल करे के चाहीं जे अधिकतम डिस्कवरबिलिटी खातिर npm भा अइसने डिलीवरी मैकेनिज्म सभ के bootstrapमाध्यम से बितरण करत समय बूटस्ट्रैप के कामकाज में संशोधन करे लें या जोड़ देलें।

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

सीएसपी आ एम्बेडेड एसवीजी के बारे में बतावल गइल बा

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

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