बूटस्ट्रॅप कडेन सुरवात करात

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

ह्या पानाचेर

बेगीन सुरू करप

खंयच्याय बिल्ड पांवड्याची गरज नासतना CDN वरवीं Bootstrap चें उत्पादन-तयार CSS आनी JavaScript समाविष्ट करून सुरवात करात. ह्या बूटस्ट्रॅप कोडपेन डेमो वरवीं वेव्हारांत पळयात .

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 खातीर <link>टॅग दवरात , आनी आमच्या JavaScript बंडला खातीर टॅग (ड्रॉपडावन, पॉपर्स, आनी टूलटिप्स स्थिती खातीर Popper सयत) बंद करचे पयलीं . आमच्या सीडीएन दुव्यां विशीं चड जाणून घेयात .<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>

तुमी पॉपर आनी आमचो जेएस वेगळोय आस्पाव करूंक शकतात. तुमी ड्रॉपडावन, पॉपओव्हर, वा टूलटिप्स वापरपाची येवजण करूंक ना जाल्यार, Popper समाविष्ट करिनासतना कांय किलोबायट वाटोवचे.

<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>

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

सीडीएन दुवे आसात

संदर्भ म्हणून, हांगा आमचीं प्राथमीक सीडीएन दुवे आसात.

वर्णन	URL
सीएसएस हें नांव	`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 वापरूं येता .

फुडली पावलां

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

जे एस घटक

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

जावास्क्रिप्टाची गरज आशिल्ले घटक दाखोवचे

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

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

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

एचटीएमएल 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">

हाचें एक उदाहरण कृतींत जलद सुरवातींत पळोवंक मेळटा .

बॉक्स-साइज करप

CSS त चड सरळ आकार दिवपाखातीर, आमी जागतीक box-sizingमोल पासून content-boxते बदलतात border-box. हाका लागून paddingघटकाच्या निमाण्या गणीत केल्ल्या रुंदायेचेर परिणाम जायना हाची खात्री जाता, पूण ताका लागून Google नकाशे आनी Google सानुकूल सोद इंजिन सारकिल्या कांय तिसऱ्या पक्षाच्या सॉफ्टवॅरा कडेन समस्या निर्माण जावंक शकतात.

तुमकां तें ओव्हररायड करपाची गरज आशिल्ल्या दुर्मिळ प्रसंगाचेर, सकयल दिल्ल्या प्रमाणें कितें तरी वापरात:

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

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Ask and explore our GitHub Discussions.
Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.