बूटस्ट्रॅपसह प्रारंभ करा

बूटस्ट्रॅप एक शक्तिशाली, वैशिष्ट्य-पॅक फ्रंटएंड टूलकिट आहे. काहीही तयार करा—प्रोटोटाइपपासून उत्पादनापर्यंत—मिनिटांमध्ये.

या पृष्ठावर

जलद सुरुवात

बूटस्ट्रॅपचे उत्पादन-तयार CSS आणि JavaScript CDN द्वारे कोणत्याही बिल्ड चरणांची आवश्यकता न ठेवता समाविष्ट करून प्रारंभ करा. या बूटस्ट्रॅप कोडपेन डेमोसह सराव मध्ये पहा .

index.htmlतुमच्या प्रोजेक्ट रूटमध्ये नवीन फाइल तयार करा . मोबाइल डिव्हाइसेसमध्ये योग्य प्रतिसादात्मक वर्तनासाठी<meta name="viewport"> टॅग देखील समाविष्ट करा .
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

बूटस्ट्रॅपचे CSS आणि JS समाविष्ट करा. बंद होण्यापूर्वी आमच्या CSS साठी टॅग आणि आमच्या JavaScript बंडलसाठी टॅग ठेवा (पॉपरसह, ड्रॉपडाउन, पॉपर्स आणि <link>टूलटिपसाठी ) . आमच्या CDN लिंक्सबद्दल अधिक जाणून घ्या .<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

तुम्ही पॉपर आणि आमचा JS देखील स्वतंत्रपणे समाविष्ट करू शकता . तुम्ही ड्रॉपडाउन, पॉपओवर किंवा टूलटिप्स वापरण्याची योजना करत नसल्यास, पॉपरचा समावेश न करून काही किलोबाइट्स वाचवा.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

नमस्कार, जग! आपले बूटस्ट्रॅप केलेले पृष्ठ पाहण्यासाठी आपल्या पसंतीच्या ब्राउझरमध्ये पृष्ठ उघडा. आता तुम्ही तुमचा स्वतःचा लेआउट तयार करून , डझनभर घटक जोडून आणि आमची अधिकृत उदाहरणे वापरून बूटस्ट्रॅपसह बिल्डिंग सुरू करू शकता .

CDN दुवे

संदर्भ म्हणून, येथे आमचे प्राथमिक CDN दुवे आहेत.

वर्णन	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
जे.एस	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

आपण सामग्री पृष्ठामध्ये सूचीबद्ध केलेल्या आमच्या कोणत्याही अतिरिक्त बिल्ड्स आणण्यासाठी CDN देखील वापरू शकता .

पुढील पायऱ्या

बूटस्ट्रॅप वापरत असलेल्या काही महत्त्वाच्या जागतिक पर्यावरण सेटिंग्जबद्दल थोडे अधिक वाचा .
आमच्या सामग्री विभागात बूटस्ट्रॅपमध्ये काय समाविष्ट आहे आणि खाली JavaScript आवश्यक असलेल्या घटकांची सूची वाचा.
थोडी अधिक शक्ती हवी आहे? पॅकेज मॅनेजरद्वारे स्त्रोत फाइल्स समाविष्ट करून बूटस्ट्रॅपसह बिल्डिंगचा विचार करा .
सह मॉड्यूल म्हणून बूटस्ट्रॅप वापरण्यासाठी शोधत आहात <script type="module">? कृपया आमचे बूटस्ट्रॅप मॉड्यूल विभाग म्हणून वापरा.

जेएस घटक

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

JavaScript आवश्यक असलेले घटक दाखवा

डिसमिस करण्याच्या सूचना
टॉगल स्थिती आणि चेकबॉक्स/रेडिओ कार्यक्षमतेसाठी बटणे
सर्व स्लाइड वर्तन, नियंत्रणे आणि निर्देशकांसाठी कॅरोसेल
सामग्रीची दृश्यमानता टॉगल करण्यासाठी संकुचित करा
डिस्प्ले आणि पोझिशनिंगसाठी ड्रॉपडाउन ( पॉपर देखील आवश्यक आहे )
प्रदर्शन, स्थिती आणि स्क्रोल वर्तन यासाठी मॉडेल
प्रतिसादात्मक वर्तन अंमलात आणण्यासाठी आमच्या संकुचित आणि ऑफकॅनव्हास प्लगइनचा विस्तार करण्यासाठी Navbar
सामग्री फलक टॉगल करण्यासाठी टॅब प्लगइनसह Navs
डिस्प्ले, पोझिशनिंग आणि स्क्रोल वर्तनासाठी ऑफकॅनव्हासेस
स्क्रोल वर्तन आणि नेव्हिगेशन अद्यतनांसाठी Scrollspy
प्रदर्शित आणि डिसमिस करण्यासाठी टोस्ट
डिस्प्ले आणि पोझिशनिंगसाठी टूलटिप आणि पॉपओव्हर्स ( पॉपर देखील आवश्यक आहे )

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

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

HTML5 doctype

बूटस्ट्रॅपसाठी HTML5 doctype चा वापर आवश्यक आहे. त्याशिवाय, तुम्हाला काही मजेदार आणि अपूर्ण शैली दिसेल.

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

क्विक स्टार्टमध्ये तुम्ही याचे उदाहरण पाहू शकता .

बॉक्स-आकार

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

समुदाय

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

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

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