Source

परिचय

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

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

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

सीएसएस के बा

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

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

जे एस के बा

हमनी के कई गो घटक के काम करे खातिर जावास्क्रिप्ट के इस्तेमाल के जरूरत होला। खास तौर प, इनहन के jQuery , Popper.js , आ हमनी के आपन जावास्क्रिप्ट प्लगइन के जरूरत होला। निम्नलिखित s के अपना पन्ना सभ के अंत के लगे, बंद करे वाला टैग <script>से ठीक पहिले, रखीं , ताकि इनहन के सक्षम कइल जा सके। </body>jQuery पहिले आवे के चाहीं, ओकरा बाद Popper.js, आ ओकरा बाद हमनी के जावास्क्रिप्ट प्लगइन.

हमनी के jQuery के स्लिम बिल्ड के इस्तेमाल करेनी जा , लेकिन पूरा संस्करण भी समर्थित बा।

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

हमनी bootstrap.bundle.jsके आ पॉपरbootstrap.bundle.min.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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 तत्व सभ के तनिका ढेर राय वाला रीसेट उपलब्ध करावे लीं।

बेरादरी

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

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

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