Source

वळख

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

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

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

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

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

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

जे एस

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

आमी jQuery चें slim build वापरतात , पूण पुराय आवृत्तीय समर्थीत आसा.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

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

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

तुमचीं पानां नवीनतम डिझायन आनी विकास मानकां सयत सेट केल्लीं खात्रीन करात. म्हणल्यार 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 घटकांक मात्शें चड मतदार रिसेट पुरवण करतना ब्राउझर आनी डिव्हायसां मदीं विसंगती दुरुस्त करपाक आमी रिबूट वापरतात.

समुदाय

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

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

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