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-sizing
to 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 इत्यस्य अनुसरणं अपि कर्तुं शक्नोति ।