मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

वळख

jsDelivr आनी साचा स्टार्टर पानासयत प्रतिसाद दिवपी, मोबायल-पयली साइट तयार करपाक संवसारांतली सगळ्यांत लोकप्रिय चौकटी, Bootstrap कडेन सुरवात करात.

ह्या पानाचेर

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

तुमच्या प्रकल्पांत Bootstrap बेगीन जोडपाक सोदतात? jsDelivr, एक मुक्त मुक्त स्रोत CDN वापरात. पॅकेज वेवस्थापक वापरप वा स्त्रोत फायली डाउनलोड करपाची गरज आसा? डाउनलोड्स पानाचेर वचचें .

सीएसएस हें नांव

आमचो CSS लोड करपाक हेर सगळ्या स्टायलशीटां पयलीं तुमच्यांत स्टायलशीट कॉपी-पेस्ट करात <link>.<head>

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

जे एस

आमच्या जायत्या घटकांक काम करपाक जावास्क्रिप्ट वापरपाची गरज आसता. खासा करून, तांकां आमचीं स्वताचीं जावास्क्रिप्ट प्लगइन आनी Popper जाय पडटात . तुमच्या पानांच्या शेवटाक, बंद करपी टॅगा आदीं, सकयल दिल्ल्या <script>s मदलो एक दवरात </body>, तांकां सक्षम करपाक.

बंडल

आमच्या दोन बंडलांतल्या एका बंडला वांगडा दरेक Bootstrap JavaScript प्लगइन आनी अवलंबन समाविष्ट करात. दोनूय bootstrap.bundle.jsआनी आमच्या टूलटिप्स आनी पोपोव्हरां खातीर पॉपरbootstrap.bundle.min.js समाविष्ट करात. बूटस्ट्रॅपांत कितें आस्पावलां हाचे विशीं चड म्हायती खातीर, उपकार करून आमचो आशय विभाग पळयात.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

वेगळें

तुमी वेगळे स्क्रिप्ट उपाय घेवन वचपाचें थारायल्यार, Popper पयली येवंक जाय (जर तुमी टूलटिप्स वा पॉपओव्हर वापरतात जाल्यार), आनी मागीर आमचे JavaScript प्लगइन.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

मॉड्यूल आसात

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

घटकांचो आस्पाव जाता

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

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

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

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

फुडल्या पांवड्या खातीर, तुमच्या साइटची सामुग्री आनी घटक मांडपाक सुरवात करपाक मांडावळ डॉक्स वा आमच्या अधिकृत उदाहरणांक भेट दिवची.

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

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

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

वयल्या स्निपेटा वांगडा, नेस्टेड घटक- ::beforeआनी वरवीं तयार केल्ली सामुग्री सयत- ::afterसगले त्या box-sizingखातीर निर्दिश्ट केल्लें वारसा घेतले .selector-for-some-widget.

CSS Tricks हांगा बॉक्स मॉडेल आनी आकार दिवपा विशीं चड जाणून घेयात .

रिबूट करचें

सुदारीत क्रॉस-ब्राउझर रेंडरींग खातीर, सामान्य HTML घटकांक मात्शें चड मतदार रिसेट पुरवण करतना ब्राउझर आनी डिव्हायसां मदीं विसंगती दुरुस्त करपाक आमी रिबूट वापरतात.

समुदाय

बूटस्ट्रॅपाच्या विकासा विशीं अद्ययावत रावचें आनी ह्या उपकारक साधनां वरवीं समाजा मेरेन पावचें.

  • द ऑफिशियल बूटस्ट्रॅप ब्लॉग वाचात आनी सबस्क्राइब करात .
  • IRC च्या सहकारी Bootstrappers कडेन गप्पा मारात. सर्वराचेर irc.libera.chat, #bootstrapचॅनलांत.
  • bootstrap-5कार्यान्वयन मदत स्टॅक ओव्हरफ्लो (टॅग केल्ली ) हांगा मेळूं येता .
  • चडांत चड सोद घेवपा खातीर npmbootstrap वा तत्सम वितरण यंत्रणे वरवीं वितरीत करतना Bootstrap कार्यक्षमताय बदलपी वा जोडपी पॅकेजींचेर विकसकांनी कीवर्ड वापरपाक जाय .

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