in English

वळख

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

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

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

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

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

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

जे एस

आमच्या जायत्या घटकांक काम करपाक जावास्क्रिप्ट वापरपाची गरज आसता. खासा करून, तांकां jQuery , Popper , आनी आमच्या स्वताच्या जावास्क्रिप्ट प्लगइनांची गरज आसा. आमी jQuery चें slim build वापरतात , पूण पुराय आवृत्तीय समर्थीत आसा.

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

बंडल

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

वेगळें

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

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

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

जावास्क्रिप्टाची गरज आशिल्ले घटक दाखोवचे
  • काडून उडोवपा खातीर सावधानताय
  • टॉगल करपाच्यो स्थिती आनी चेकबॉक्स/रेडिओ कार्यक्षमताय खातीर बटण
  • सगळ्या स्लाइड वर्तना खातीर, नियंत्रणां खातीर, आनी निर्देशकां खातीर हिंडोळ
  • सामुग्रीची दृश्यताय टॉगल करपाखातीर संकुचीत करात
  • दाखोवपाखातीर आनी स्थिती करपाखातीर ड्रॉपडावन ( 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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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, 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 Tricks हांगा बॉक्स मॉडेल आनी आकार दिवपा विशीं चड जाणून घेयात .

रिबूट करचें

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

समुदाय

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

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

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

सीएसपी आनी एम्बेडेड एसव्हीजी

कितलेशेच Bootstrap घटक ब्राउझर आनी डिव्हायसां मदीं घटकांक सातत्यान आनी सहजपणान शैली करपाक आमच्या CSS त एम्बेडेड SVG समाविष्ट करतात. चड कडक CSP संरचना आशिल्ल्या संघटणां खातीर , आमी आमच्या एम्बेडेड SVG च्या सगळ्या प्रसंगांचें दस्तावेजीकरण केलां (जे सगळे वरवीं लागू जातात background-image) जेणे करून तुमी तुमच्या पर्यायांचो चड खोलायेन नियाळ घेवंक शकतात.

समुदाय संवादाचेर आदारीत , तुमच्या स्वताच्या कोडबेसांत हाका संबोधीत करपा खातीर कांय पर्यायांत URL थळाव्यान होस्ट केल्ल्या मालमत्तेन बदलप, प्रतिमा काडून उडोवप आनी इनलायन प्रतिमा वापरप (सगल्या घटकांनी शक्य ना), आनी तुमचो CSP बदलप हांचो आस्पाव जाता. आमची शिफारस म्हणल्यार तुमच्या स्वताच्या सुरक्षा धोरणांचो बारीकसाणेन नियाळ घेवप आनी गरज पडल्यार मुखार वचपाचो सगळ्यांत बरो मार्ग थारावप.