आमुख

Bootstrap इत्यनेन आरभत, यत् प्रतिक्रियाशीलं, मोबाईल-प्रथम-साइट्-निर्माणार्थं विश्वस्य सर्वाधिकं लोकप्रियं रूपरेखा अस्ति, jsDelivr इत्यनेन सह तथा च टेम्पलेट्-स्टार्टर-पृष्ठेन सह।

इस पृष्ठ पर

त्वरित आरम्भ

Bootstrap इत्येतत् शीघ्रं स्वस्य परियोजनायां योजयितुं इच्छति वा? jsDelivr, एकं निःशुल्कं मुक्तस्रोत CDN उपयुज्यताम् । संकुलप्रबन्धकस्य उपयोगेन वा स्रोतसञ्चिकानां डाउनलोड् कर्तुं आवश्यकता अस्ति वा? डाउनलोड् पृष्ठं प्रति गच्छन्तु .

CSS इति

अस्माकं CSS लोड् कर्तुं अन्येभ्यः सर्वेभ्यः शैलीपत्रेभ्यः पूर्वं <link>स्वस्य मध्ये stylesheet प्रतिलिपि-चिनोतु ।<head>

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

ज स

अस्माकं बहवः घटकाः कार्यं कर्तुं जावास्क्रिप्ट् इत्यस्य उपयोगस्य आवश्यकतां अनुभवन्ति । विशेषतः, तेषां कृते अस्माकं स्वकीयानां JavaScript plugins तथा Popper इत्यस्य आवश्यकता वर्तते । निम्नलिखित <script>s मध्ये एकं स्वपृष्ठस्य अन्ते समीपे, समापनटैगस्य पूर्वमेव , </body>तान् सक्षमीकरणाय स्थापयन्तु ।

पोटलिका

अस्माकं द्वयोः बण्डल्योः एकेन सह प्रत्येकं Bootstrap JavaScript प्लगिन् तथा निर्भरता समावेशयन्तु । उभयम् अपि bootstrap.bundle.jsच अस्माकं टूल्टिप्स तथा पोपोवर्स् कृते पोपरंbootstrap.bundle.min.js समावेशितम् । Bootstrap मध्ये किं समाविष्टम् इति विषये अधिकसूचनार्थं कृपया अस्माकं सामग्रीविभागं पश्यन्तु ।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

पृथक्

यदि भवान् पृथक् स्क्रिप्ट् समाधानेन सह गन्तुं निश्चयति तर्हि Popper प्रथमं आगन्तुं अर्हति (यदि भवान् tooltips अथवा popovers इत्यस्य उपयोगं करोति), ततः अस्माकं JavaScript plugins इत्यस्य उपयोगं करोति।

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

मॉड्यूल

यदि भवान् , इत्यस्य उपयोगं <script type="module">करोति तर्हि कृपया अस्माकं Bootstrap इत्यस्य उपयोगं मॉड्यूल् विभागरूपेण पश्यन्तु ।

घटकाः

जिज्ञासुः अस्ति यत् अस्माकं जावास्क्रिप्ट् तथा पोपर इत्यस्य स्पष्टतया केषां घटकानां आवश्यकता वर्तते? अधः show components इति लिङ्क् नुदन्तु । यदि भवान् सामान्यपृष्ठसंरचनायाः विषये सर्वथा अनिश्चितः अस्ति तर्हि उदाहरणपृष्ठसारूप्यस्य कृते पठन् एव भवतु ।

जावास्क्रिप्ट् आवश्यकं घटकं दर्शयतु

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

प्रारम्भिक टेम्पलेट

नवीनतम डिजाइन एवं विकास मानकों के साथ अपने पृष्ठों को अवश्य स्थापित करें। तस्य अर्थः अस्ति यत् HTML5 doctype इत्यस्य उपयोगः भवति तथा च सम्यक् प्रतिक्रियाशीलव्यवहारस्य कृते viewport meta tag इत्यस्य समावेशः भवति । सर्वं एकत्र स्थापयतु तर्हि भवतः पृष्ठानि एतादृशानि भवेयुः।

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

अग्रिमपदार्थानाम् कृते, भवतः साइट्-सामग्री घटकान् च विन्यस्तुं आरभ्यतुं Layout docs अथवा अस्माकं आधिकारिक-उदाहरणानि पश्यन्तु ।

महत्त्वपूर्ण ग्लोबल्स

बूटस्ट्रैप् महत्त्वपूर्णवैश्विकशैल्याः सेटिंग्स् च मुष्टिभ्यां नियोजयति येषां विषये भवन्तः तस्य उपयोगं कुर्वन् अवगताः भवितुम् अर्हन्ति, ये सर्वे प्रायः अनन्यतया क्रॉस् ब्राउज़रशैल्याः सामान्यीकरणं प्रति सज्जीकृताः सन्ति आवाम् अन्तः गोतां कुर्मः।

HTML5 doctype इति

बूटस्ट्रैप् कृते HTML5 doctype इत्यस्य उपयोगः आवश्यकः अस्ति । तद्विना, भवन्तः किञ्चित् फन्की अपूर्णं स्टाइलिंग् पश्यन्ति, परन्तु तत् समावेशयित्वा किमपि पर्याप्तं हिचकी न भवेत्।

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

प्रतिक्रियाशील मेटा टैग

Bootstrap is developed mobile first , एकः रणनीतिः यस्मिन् वयं प्रथमं मोबाईल-उपकरणानाम् कृते कोडं अनुकूलयामः ततः CSS मीडिया-प्रश्नानां उपयोगेन आवश्यकरूपेण घटकान् स्केल अप कुर्मः। सर्वेषां उपकरणानां कृते सम्यक् प्रतिपादनं स्पर्शजूमिंग् च सुनिश्चित्य, प्रतिक्रियाशीलं viewport meta tag इत्येतत् स्वस्य मध्ये योजयन्तु <head>।

<meta name="viewport" content="width=device-width, initial-scale=1">

अस्य उदाहरणं भवन्तः starter template मध्ये क्रियारूपेण द्रष्टुं शक्नुवन्ति |

पेटी-आकारः

CSS मध्ये अधिकं सरलं आकारनिर्धारणाय, वयं वैश्विकमूल्यं box-sizingto content-box- मध्ये परिवर्तयामः border-box। एतेन सुनिश्चितं paddingभवति यत् कस्यचित् तत्त्वस्य अन्तिमगणितविस्तारं न प्रभावितं करोति, परन्तु एतत् Google Maps तथा Google Custom Search Engine इत्यादिषु केषुचित् तृतीयपक्षीयसॉफ्टवेयरेषु समस्यां जनयितुं शक्नोति

दुर्लभे अवसरे भवद्भिः तत् अधिलिखितुं आवश्यकं भवति, तस्मिन् निम्नलिखितवत् किमपि उपयुज्यताम् ।

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

उपर्युक्तेन स्निपेट् इत्यनेन सह, नेस्टेड् तत्त्वानि—माध्यमेन उत्पन्ना सामग्री सहितम् ::before—सर्वे तदर्थं ::afterनिर्दिष्टं उत्तराधिकारं प्राप्नुयुः ।box-sizing.selector-for-some-widget

CSS Tricks इत्यत्र बॉक्स मॉडल् तथा साइजिंग् विषये अधिकं ज्ञातुं शक्नुवन्ति .

पुनः आरभत

उन्नत-क्रॉस्-ब्राउजर-प्रतिपादनार्थं, वयं ब्राउजर्-यन्त्राणां मध्ये असङ्गतिं सम्यक् कर्तुं Reboot इत्यस्य उपयोगं कुर्मः तथा च सामान्य-HTML-तत्त्वेभ्यः किञ्चित् अधिकं मतयुक्तं रीसेट्-प्रदानं कुर्मः

समुदाय

Bootstrap इत्यस्य विकासस्य विषये अद्यतनं भवन्तु तथा च एतैः सहायकसंसाधनैः समुदायं प्रति गच्छन्तु।

The Official Bootstrap Blog इति पठित्वा सदस्यतां गृह्यताम् .
IRC मध्ये सहकारिभिः Bootstrappers इत्यनेन सह गपशपं कुर्वन्तु। सर्वरे irc.libera.chat, #bootstrapचैनले।
कार्यान्वयन सहायता Stack Overflow (tagged bootstrap-5) इत्यत्र प्राप्यते ।
अधिकतम आविष्कारक्षमतायै npm अथवा तत्सदृशवितरणतन्त्राणां bootstrapमाध्यमेन वितरणं कुर्वन् Bootstrap इत्यस्य कार्यक्षमतां परिवर्तयन्ति वा योजयन्ति वा इति संकुलेषु विकासकाः कीवर्डस्य उपयोगं कुर्वन्तु

नवीनतमं गपशपं भयानकं संगीतविडियो च द्रष्टुं भवान् ट्विट्टरे @getbootstrap इत्यस्य अनुसरणं अपि कर्तुं शक्नोति ।