in English

परिचय

बूटस्ट्रॅपसह प्रारंभ करा, प्रतिसाद देणारी, मोबाइल-प्रथम साइट तयार करण्यासाठी जगातील सर्वात लोकप्रिय फ्रेमवर्क, jsDelivr आणि टेम्पलेट स्टार्टर पृष्ठासह.

जलद सुरुवात

आपल्या प्रोजेक्टमध्ये बूटस्ट्रॅप द्रुतपणे जोडू इच्छित आहात? jsDelivr वापरा, एक विनामूल्य मुक्त स्रोत CDN. पॅकेज व्यवस्थापक वापरत आहात किंवा स्त्रोत फायली डाउनलोड करण्याची आवश्यकता आहे? डाउनलोड पृष्ठाकडे जा .

CSS

आमचे 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">

जे.एस

आमच्या अनेक घटकांना कार्य करण्यासाठी JavaScript चा वापर आवश्यक आहे. विशेषतः, त्यांना jQuery , Popper , आणि आमचे स्वतःचे JavaScript प्लगइन आवश्यक आहेत. आम्ही jQuery चे स्लिम बिल्ड वापरतो , परंतु पूर्ण आवृत्ती देखील समर्थित आहे.

खालीलपैकी एक आपल्या <script>पृष्ठांच्या शेवटी, क्लोजिंग </body>टॅगच्या आधी, त्यांना सक्षम करण्यासाठी ठेवा. jQuery आधी, नंतर Popper आणि नंतर आमचे JavaScript प्लगइन आले पाहिजेत.

मोळी

आमच्या दोन बंडलपैकी प्रत्येक बूटस्ट्रॅप JavaScript प्लगइन समाविष्ट करा. दोन्ही bootstrap.bundle.jsआणि आमच्या टूलटिप्स आणि पॉपओव्हर्ससाठी पॉपरbootstrap.bundle.min.js समाविष्ट करा, परंतु jQuery नाही . प्रथम jQuery, नंतर बूटस्ट्रॅप 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/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

वेगळे

तुम्ही स्वतंत्र स्क्रिप्ट सोल्यूशनसह जाण्याचे ठरविल्यास, पॉपर प्रथम येणे आवश्यक आहे (जर तुम्ही टूलटिप्स किंवा पॉपओव्हर्स वापरत असाल तर), आणि नंतर आमचे 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 आणि पॉपर आवश्यक आहेत हे उत्सुक आहे? खालील शो घटक दुव्यावर क्लिक करा. पृष्ठाच्या संरचनेबद्दल आपल्याला खात्री नसल्यास, उदाहरण पृष्ठ टेम्पलेटसाठी वाचत रहा.

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

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

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

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

एकूण पृष्ठ आवश्यकतांसाठी तुम्हाला एवढेच हवे आहे. तुमच्या साइटची सामग्री आणि घटक मांडणे सुरू करण्यासाठी लेआउट डॉक्स किंवा आमच्या अधिकृत उदाहरणांना भेट द्या .

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

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

HTML5 doctype

बूटस्ट्रॅपला HTML5 doctype चा वापर आवश्यक आहे. त्याशिवाय, तुम्हाला काही फंकी अपूर्ण स्टाइलिंग दिसेल, परंतु ते समाविष्ट केल्याने कोणतीही लक्षणीय अडचण येऊ नये.

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

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

बूटस्ट्रॅप प्रथम मोबाइल विकसित केला आहे , एक धोरण ज्यामध्ये आम्ही प्रथम मोबाइल डिव्हाइससाठी कोड ऑप्टिमाइझ करतो आणि नंतर 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 युक्त्या येथे बॉक्स मॉडेल आणि आकारमानाबद्दल अधिक जाणून घ्या .

रीबूट करा

सुधारित क्रॉस-ब्राउझर रेंडरिंगसाठी, आम्ही सामान्य HTML घटकांना किंचित अधिक अभिमत रीसेट प्रदान करताना ब्राउझर आणि डिव्हाइसेसमधील विसंगती सुधारण्यासाठी रीबूट वापरतो.

समुदाय

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

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

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

CSPs आणि एम्बेडेड SVGs

अनेक बूटस्ट्रॅप घटकांमध्ये आमच्या CSS मध्ये एम्बेड केलेले SVGs समाविष्ट असतात आणि ब्राउझर आणि डिव्हाइसेसवर सातत्याने आणि सहजतेने शैलीतील घटक असतात. अधिक कठोर CSP कॉन्फिगरेशन असलेल्या संस्थांसाठी , आम्ही आमच्या एम्बेड केलेल्या SVG च्या सर्व घटनांचे दस्तऐवजीकरण केले आहे (जे सर्व द्वारे लागू केले आहेत background-image) जेणेकरून तुम्ही तुमच्या पर्यायांचे अधिक सखोल पुनरावलोकन करू शकता.

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