Source

परिचय

jsDelivr आरू एक टेम्पलेट स्टार्टर पृष्ठ के साथ, उत्तरदायी, मोबाइल-प्रथम साइट बनाबै लेली दुनिया केरऽ सबसे लोकप्रिय ढाँचा, बूटस्ट्रैप स॑ शुरू करऽ ।

त्वरित शुरुआत

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

सीएसएस

हमर CSS लोड करय लेल अन्य सब स्टाइलशीट सं पहिने <link>अपन स्टाइलशीट के कॉपी-पेस्ट करू .<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

जे एस

हमरऽ बहुत सारा घटकऽ क॑ काम करै लेली जावास्क्रिप्ट केरऽ उपयोग के जरूरत छै । विशेष रूप स, हुनका jQuery , Popper.js , आ हमर अपन जावास्क्रिप्ट प्लगइन क आवश्यकता अछि । <script>अपनऽ पन्ना के अंत के पास, बंद करै वाला टैग स॑ ठीक पहिले, निम्नलिखित s क॑ </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-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

हमर bootstrap.bundle.jsआ पॉपरbootstrap.bundle.min.js शामिल अछि , मुदा jQuery नहि . बूटस्ट्रैप मे की शामिल अछि एहि बारे मे बेसी जानकारी क लेल, कृपया हमर सामग्री खंड देखू.

जावास्क्रिप्ट क आवश्यकता वाला घटक देखाउ
  • बर्खास्तगी के लिये अलर्ट
  • टॉगल स्टेट आ चेकबॉक्स/रेडियो कार्यक्षमता क लेल बटन
  • सब स्लाइड व्यवहार, नियंत्रण, आ संकेतक कें लेल हिंडोला
  • सामग्रीक दृश्यता टॉगल करबाक लेल संकुचित करू
  • प्रदर्शन आओर स्थिति के लेल ड्रॉपडाउन ( 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-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

समग्र पृष्ठ आवश्यकताक लेल एतबे चाही। अपन साइट के सामग्री आ घटक के लेआउट शुरू करय लेल लेआउट डॉक्स या हमर आधिकारिक उदाहरण पर जाउ .

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

बूटस्ट्रैप मुट्ठी भर महत्वपूर्ण वैश्विक शैली आरू सेटिंग्स क॑ नियोजित करै छै जेकरा बारे म॑ आपने क॑ एकरऽ उपयोग करला प॑ जागरूक होना चाहियऽ, जे सब लगभग विशेष रूप स॑ क्रॉस ब्राउज़र शैली केरऽ सामान्यीकरण के दिशा म॑ तैयार छै । चलू गोता लगाबी।

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

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

<!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

बॉक्स मॉडल आ साइजिंग के बारे मे बेसी जानू CSS Tricks पर .

रिबूट करू

बेहतर क्रॉस-ब्राउजर रेंडरिंग के लेल, हम ब्राउज़र आरू डिवाइस भर म॑ असंगति क॑ ठीक करै लेली रिबूट के उपयोग करै छियै जबकि आम एचटीएमएल तत्वऽ प॑ कुछ अधिक राय वाला रीसेट प्रदान करै छै ।

समुदाय

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

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

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