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 , और हमारे अपने JavaScript प्लगइन्स की आवश्यकता होती है। निम्नलिखित <script>को अपने पृष्ठों के अंत के पास, क्लोजिंग </body>टैग के ठीक पहले, उन्हें सक्षम करने के लिए रखें। jQuery पहले आना चाहिए, फिर Popper.js, और फिर हमारे JavaScript प्लगइन्स।

हम 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, हमारे JS और Popper.js की आवश्यकता है? नीचे शो कंपोनेंट्स लिंक पर क्लिक करें। यदि आप सामान्य पृष्ठ संरचना के बारे में बिल्कुल भी अनिश्चित हैं, तो उदाहरण पृष्ठ टेम्पलेट के लिए पढ़ते रहें।

हमारे bootstrap.bundle.jsऔर पॉपरbootstrap.bundle.min.js शामिल हैं , लेकिन 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-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>

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

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

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

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 तत्वों को थोड़ा अधिक रायशुदा रीसेट प्रदान करते हुए ब्राउज़र और डिवाइस में विसंगतियों को ठीक करने के लिए रीबूट का उपयोग करते हैं।

समुदाय

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

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

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