Bootstrap इत्यनेन सह आरभत

बूटस्ट्रैप् एकं शक्तिशाली, विशेषतायुक्तं अग्रभागसाधनपुस्तिका अस्ति । किमपि निर्मायताम्—प्रोटोटाइपतः उत्पादनपर्यन्तं—निमेषेषु।

इस पृष्ठ पर

त्वरित आरम्भ

Bootstrap इत्यस्य उत्पादन-सज्जं CSS तथा JavaScript CDN मार्गेण विना किमपि निर्माणचरणस्य आवश्यकतां विना आरभत। अस्मिन् Bootstrap CodePen डेमो इत्यनेन सह व्यवहारे पश्यन्तु .

index.htmlस्वस्य परियोजनामूले नूतनां सञ्चिकां रचयन्तु । चलयन्त्रेषु सम्यक् प्रतिक्रियाशीलव्यवहारार्थं<meta name="viewport"> टैग् अपि समावेशयन्तु ।
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```
Bootstrap इत्यस्य CSS तथा JS इत्येतत् समाविष्टं कुर्वन्तु । अस्माकं CSS कृते <link>टैगं स्थापयन्तु , अस्माकं JavaScript बण्डल् कृते टैगं च (Dropdowns, poppers, to tooltips च स्थितिं स्थापयितुं Popper सहितम्) समापनात् पूर्वं स्थापयन्तु अस्माकं CDN लिङ्कानां विषये अधिकं ज्ञातुं शक्नुवन्ति .<head><script></body>
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>
```
भवान् Popper अपि च अस्माकं JS पृथक् पृथक् समावेशयितुं शक्नोति। यदि भवान् ड्रॉप्डाउन्स्, पोपोवर्स्, अथवा टूल्टिप्स् इत्यस्य उपयोगं कर्तुं योजनां न करोति तर्हि Popper इत्यस्य समावेशं न कृत्वा केचन किलोबाइट् रक्षतु ।
```
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
```
नमस्कार, जगत् ! स्वस्य Bootstrapped पृष्ठं द्रष्टुं स्वस्य पसन्दस्य ब्राउजरे पृष्ठं उद्घाटयन्तु । इदानीं भवान् स्वस्य विन्यासं निर्माय , दर्जनशः घटकान् योजयित्वा , अस्माकं आधिकारिक - उदाहरणानां उपयोगेन च Bootstrap इत्यनेन निर्माणं आरभुं शक्नोति |

CDN लिङ्कानि

सन्दर्भरूपेण, अत्र अस्माकं प्राथमिक CDN लिङ्कानि सन्ति ।

वर्णनम्‌	URL इति
CSS इति	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
ज स	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Contents पृष्ठे सूचीकृतं अस्माकं किमपि अतिरिक्तं निर्माणं आनेतुं भवान् CDN इत्यस्य अपि उपयोगं कर्तुं शक्नोति |

अग्रिमाणि पदानि

Bootstrap इत्यनेन उपयुज्यमानानाम् केषाञ्चन महत्त्वपूर्णानां वैश्विकपर्यावरणसेटिंग्स् विषये किञ्चित् अधिकं पठन्तु ।
अस्माकं सामग्रीविभागे Bootstrap मध्ये किं समाविष्टम् इति विषये पठन्तु तथा च अधः जावास्क्रिप्ट् आवश्यकं घटकानां सूचीं पठन्तु ।
किञ्चित् अधिकशक्तिः आवश्यकी अस्ति ? संकुलप्रबन्धकद्वारा स्रोतसञ्चिकाः समाविष्ट्य Bootstrap इत्यनेन सह निर्माणं विचारयन्तु |
Bootstrap इत्यस्य उपयोगं मॉड्यूलरूपेण कर्तुं पश्यति <script type="module">? कृपया अस्माकं Bootstrap इत्यस्य उपयोगं मॉड्यूल् विभागरूपेण पश्यन्तु ।

जे एस घटक

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

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

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

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

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

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

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

पेटी-आकारः

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

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