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>s क॑</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, हमर जावास्क्रिप्ट, आ पॉपर क आवश्यकता अछि? नीचा देल गेल show components लिंक पर क्लिक करू। यदि आप पृष्ठ संरचना के बारे में अनिश्चित हैं, तो एक उदाहरण पृष्ठ टेम्पलेट के लिए पढ़ते रहिये |

जावास्क्रिप्ट क आवश्यकता वाला घटक देखाउ

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

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

अपन पन्ना नवीनतम डिजाइन आ विकास मानक के संग सेटअप अवश्य करू. मतलब छै कि 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>

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

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 पर .

रिबूट करू

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

समुदाय

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

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

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

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

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

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

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