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 , और हमारे अपने JavaScript प्लगइन्स की आवश्यकता होती है। हम 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>

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

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

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

HTML5 सिद्धांत

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

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

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

बूटस्ट्रैप को पहले मोबाइल विकसित किया गया है , एक रणनीति जिसमें हम पहले मोबाइल उपकरणों के लिए कोड अनुकूलित करते हैं और फिर सीएसएस मीडिया प्रश्नों का उपयोग करके आवश्यक घटकों को स्केल करते हैं। उचित रेंडरिंग सुनिश्चित करने और सभी उपकरणों के लिए ज़ूमिंग स्पर्श करने के लिए, अपने में प्रतिक्रियाशील व्यूपोर्ट मेटा टैग जोड़ें<head> ।

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

आप इसका एक उदाहरण स्टार्टर टेम्प्लेट में कार्रवाई में देख सकते हैं ।

बॉक्स आकार

CSS में अधिक सरल आकार के लिए, हम वैश्विक box-sizingमान को से पर स्विच करते content-boxहैं border-box। यह सुनिश्चित paddingकरता है कि किसी तत्व की अंतिम गणना की गई चौड़ाई को प्रभावित नहीं करता है, लेकिन यह Google मानचित्र और Google कस्टम खोज इंजन जैसे कुछ तृतीय पक्ष सॉफ़्टवेयर के साथ समस्याएं पैदा कर सकता है।

दुर्लभ अवसर पर आपको इसे ओवरराइड करने की आवश्यकता होती है, निम्न की तरह कुछ उपयोग करें:

.selector-for-some-widget {
  box-sizing: content-box;
}

उपरोक्त स्निपेट के साथ, नेस्टेड तत्व—के माध्यम से उत्पन्न सामग्री सहित— ::beforeऔर — ::afterसभी उसके लिए निर्दिष्ट इनहेरिट box-sizingकरेंगे .selector-for-some-widget।

CSS ट्रिक्स पर बॉक्स मॉडल और साइज़िंग के बारे में अधिक जानें ।

रीबूट

बेहतर क्रॉस-ब्राउज़र रेंडरिंग के लिए, हम सामान्य HTML तत्वों को थोड़ा अधिक रायशुदा रीसेट प्रदान करते हुए ब्राउज़र और डिवाइस में विसंगतियों को ठीक करने के लिए रीबूट का उपयोग करते हैं।

समुदाय

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

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

नवीनतम गपशप और भयानक संगीत वीडियो के लिए आप ट्विटर पर @getbootstrap का भी अनुसरण कर सकते हैं ।

सीएसपी और एम्बेडेड एसवीजी

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

सामुदायिक बातचीत के आधार पर , आपके अपने कोडबेस में इसे संबोधित करने के कुछ विकल्पों में URL को स्थानीय रूप से होस्ट की गई संपत्तियों से बदलना, छवियों को हटाना और इनलाइन छवियों का उपयोग करना (सभी घटकों में संभव नहीं) और अपने CSP को संशोधित करना शामिल है। हमारी अनुशंसा है कि आप अपनी स्वयं की सुरक्षा नीतियों की सावधानीपूर्वक समीक्षा करें और यदि आवश्यक हो तो आगे के सर्वोत्तम मार्ग पर निर्णय लें।