Source

परिचय

बूटस्ट्रॅपसह प्रारंभ करा, प्रतिसाद देणारी, मोबाइल-प्रथम साइट तयार करण्यासाठी जगातील सर्वात लोकप्रिय फ्रेमवर्क, jsDelivr आणि टेम्पलेट स्टार्टर पृष्ठासह.

जलद सुरुवात

आपल्या प्रोजेक्टमध्ये बूटस्ट्रॅप द्रुतपणे जोडू इच्छित आहात? jsDelivr वापरा, jsDelivr वरील लोकांनी विनामूल्य प्रदान केले आहे. पॅकेज व्यवस्थापक वापरत आहात किंवा स्त्रोत फायली डाउनलोड करण्याची आवश्यकता आहे? डाउनलोड पृष्ठाकडे जा .

CSS

आमचे CSS लोड करण्यासाठी इतर सर्व स्टाईलशीटच्या आधी स्टाईलशीट कॉपी-पेस्ट करा <link>.<head>

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

जे.एस

आमच्या अनेक घटकांना कार्य करण्यासाठी JavaScript चा वापर आवश्यक आहे. विशेषतः, त्यांना jQuery , Popper.js , आणि आमचे स्वतःचे JavaScript प्लगइन आवश्यक आहेत. खालील <script>s तुमच्या पृष्ठांच्या शेवटी, क्लोजिंग </body>टॅगच्या आधी, त्यांना सक्षम करण्यासाठी ठेवा. jQuery आधी, नंतर Popper.js आणि नंतर आमचे JavaScript प्लगइन आले पाहिजेत.

आम्ही jQuery चे स्लिम बिल्ड वापरतो , परंतु पूर्ण आवृत्ती देखील समर्थित आहे.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

उत्सुकता आहे की कोणत्या घटकांना स्पष्टपणे jQuery, आमचे JS आणि Popper.js आवश्यक आहे? खालील शो घटक दुव्यावर क्लिक करा. जर तुम्हाला सामान्य पृष्ठ संरचनेबद्दल खात्री नसेल, तर उदाहरण पृष्ठ टेम्पलेटसाठी वाचत रहा.

आमचे bootstrap.bundle.jsआणि पॉपरbootstrap.bundle.min.js समाविष्ट आहे , परंतु jQuery नाही . बूटस्ट्रॅपमध्ये काय समाविष्ट आहे याबद्दल अधिक माहितीसाठी, कृपया आमचा सामग्री विभाग पहा.

JavaScript आवश्यक असलेले घटक दाखवा
  • डिसमिस करण्याच्या सूचना
  • टॉगल स्थिती आणि चेकबॉक्स/रेडिओ कार्यक्षमतेसाठी बटणे
  • सर्व स्लाइड वर्तन, नियंत्रणे आणि निर्देशकांसाठी कॅरोसेल
  • सामग्रीची दृश्यमानता टॉगल करण्यासाठी संकुचित करा
  • डिस्प्ले आणि पोझिशनिंगसाठी ड्रॉपडाउन ( Popper.js देखील आवश्यक आहे )
  • प्रदर्शन, स्थिती आणि स्क्रोल वर्तन यासाठी मॉडेल
  • प्रतिसादात्मक वर्तन अंमलात आणण्‍यासाठी आमचे संकुचित करा प्लगइन वाढवण्‍यासाठी नवबार
  • डिस्प्ले आणि पोझिशनिंगसाठी टूलटिप आणि पॉपओव्हर्स ( पोपर.जेएस देखील आवश्यक आहे )
  • स्क्रोल वर्तन आणि नेव्हिगेशन अद्यतनांसाठी Scrollspy

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

तुमची पेज नवीनतम डिझाइन आणि डेव्हलपमेंट मानकांसह सेट केलेली असल्याची खात्री करा. म्हणजे HTML5 doctype वापरणे आणि योग्य प्रतिसादात्मक वर्तनांसाठी व्ह्यूपोर्ट मेटा टॅग समाविष्ट करणे. हे सर्व एकत्र ठेवा आणि आपली पृष्ठे यासारखी दिसली पाहिजेत:

<!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-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

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

महत्वाचे जागतिक

बूटस्ट्रॅप मूठभर महत्त्वाच्या जागतिक शैली आणि सेटिंग्जचा वापर करते ज्याचा वापर करताना तुम्हाला याची जाणीव असणे आवश्यक आहे, जे सर्व जवळजवळ केवळ क्रॉस ब्राउझर शैलींच्या सामान्यीकरणासाठी सज्ज आहेत. चला आत जाऊया.

HTML5 doctype

बूटस्ट्रॅपसाठी HTML5 doctype चा वापर आवश्यक आहे. त्याशिवाय, तुम्हाला काही फंकी अपूर्ण स्टाइलिंग दिसेल, परंतु ते समाविष्ट केल्याने कोणतीही लक्षणीय अडचण येऊ नये.

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

प्रतिसादात्मक मेटा टॅग

बूटस्ट्रॅप प्रथम मोबाइल विकसित केला आहे , एक धोरण ज्यामध्ये आम्ही प्रथम मोबाइल डिव्हाइससाठी कोड ऑप्टिमाइझ करतो आणि नंतर CSS मीडिया क्वेरी वापरून आवश्यकतेनुसार घटक वाढवतो. सर्व उपकरणांसाठी योग्य रेंडरिंग आणि टच झूमिंग सुनिश्चित करण्यासाठी , प्रतिसादात्मक व्ह्यूपोर्ट मेटा टॅग आपल्या <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 घटकांना किंचित अधिक अभिमत रीसेट प्रदान करताना ब्राउझर आणि डिव्हाइसेसमधील विसंगती सुधारण्यासाठी रीबूट वापरतो.

समुदाय

बूटस्ट्रॅपच्या विकासावर अद्ययावत रहा आणि या उपयुक्त संसाधनांसह समुदायापर्यंत पोहोचा.

  • Twitter वर @getbootstrap फॉलो करा .
  • अधिकृत बूटस्ट्रॅप ब्लॉग वाचा आणि सदस्यता घ्या .
  • IRC मधील सहकारी बूटस्ट्रॅपर्सशी गप्पा मारा. irc.freenode.netसर्व्हरवर, चॅनेलमध्ये ##bootstrap.
  • bootstrap-4स्टॅक ओव्हरफ्लो (टॅग केलेले ) येथे अंमलबजावणी मदत मिळू शकते .
  • bootstrapविकासकांनी पॅकेजेसवर कीवर्ड वापरावे जे जास्तीत जास्त शोधण्यायोग्यतेसाठी npm किंवा तत्सम वितरण यंत्रणेद्वारे वितरण करताना बूटस्ट्रॅपच्या कार्यक्षमतेत सुधारणा करतात किंवा जोडतात.

नवीनतम गप्पाटप्पा आणि अप्रतिम संगीत व्हिडिओंसाठी तुम्ही Twitter वर @getbootstrap ला देखील फॉलो करू शकता .