बूटस्ट्रैप जाल उदाहरण
Bootstrap जालप्रणाल्याः अन्तः निर्माणेन परिचितं कर्तुं मूलभूतजालविन्यासाः ।
एतेषु उदाहरणेषु .themed-grid-colकिञ्चित् विषयवस्तुं योजयितुं स्तम्भेषु वर्गः योजितः भवति । एषः वर्गः नास्ति यः पूर्वनिर्धारितरूपेण Bootstrap मध्ये उपलभ्यते ।
पञ्च जालस्तराः
Bootstrap grid system इत्यस्य पञ्च स्तराः सन्ति, वयं समर्थितानां प्रत्येकस्य उपकरणानां श्रेणीयाः कृते एकं । प्रत्येकं स्तरं न्यूनतमदृश्यपोर्ट् आकारेण आरभ्यते तथा च स्वयमेव बृहत्तरयन्त्रेषु प्रवर्तते यावत् अधिलिखितं न भवति ।
त्रयः समानस्तम्भाः
डेस्कटॉप् तः आरभ्य बृहत् डेस्कटॉप् मध्ये स्केल कृत्वा त्रीणि समानविस्तारयुक्तानि स्तम्भानि प्राप्नुवन्तु . चलयन्त्रेषु, टैब्लेट्-मध्ये, अधः च स्तम्भाः स्वयमेव स्तम्भिताः भविष्यन्ति ।
तीन समान स्तम्भ विकल्प
क्लास् इत्यस्य उपयोगेन .row-cols-*भवान् सहजतया समानस्तम्भयुक्तं जालपुटं निर्मातुम् अर्हति ।
.colबालकस्य
.row-cols-md-3
.colबालकस्य
.row-cols-md-3
.colबालकस्य
.row-cols-md-3
त्रयः असमानस्तम्भाः
डेस्कटॉप् इत्यस्मात् आरभ्य विविधविस्तारस्य बृहत् डेस्कटॉप् यावत् स्केल कृत्वा त्रीणि स्तम्भानि प्राप्नुवन्तु । स्मर्यतां, एकस्य क्षैतिजखण्डस्य कृते जालस्तम्भाः द्वादशपर्यन्तं योजयितव्याः । तस्मात् अधिकं, स्तम्भाः च viewport किमपि न भवतु स्तम्भनं आरभन्ते ।
द्वौ स्तम्भौ
डेस्कटॉप् मध्ये आरभ्य बृहत् डेस्कटॉप् मध्ये स्केल कृत्वा द्वौ स्तम्भौ प्राप्नुवन्तु |
पूर्ण चौड़ाई, एकल स्तम्भ
पूर्णविस्तारयुक्तानां तत्त्वानां कृते कोऽपि जालवर्गः आवश्यकः नास्ति ।
द्वौ स्तम्भौ द्वौ नीडस्तम्भौ सह
दस्तावेजीकरणस्य अनुसारं, नेस्टिंग् सुलभम् अस्ति-मात्रं विद्यमानस्य स्तम्भस्य अन्तः स्तम्भानां पङ्क्तिं स्थापयन्तु । एतेन भवन्तः डेस्कटॉप् तः आरभ्य बृहत् डेस्कटॉप् मध्ये स्केल कृत्वा द्वौ स्तम्भौ ददाति , बृहत्तरस्य स्तम्भस्य अन्तः अन्यौ द्वौ (समानविस्तारौ) सह ।
चलयन्त्रस्य आकारेषु, टैब्लेट्-मध्ये, अधः च एते स्तम्भाः तेषां नेस्टेड्-स्तम्भाः च स्तम्भयिष्यन्ति ।
मिश्रित: मोबाइल एवं डेस्कटॉप
Bootstrap v4 ग्रिड् प्रणाल्यां पञ्चवर्गाणां स्तराः सन्ति: xs (अतिरिक्तं लघु, एषः वर्गः इन्फिक्स् न उपयुज्यते), sm (लघु), md (मध्यमम्), lg (बृहत्), xl (अतिरिक्तं बृहत्) च । अधिकगतिशीलं लचीलं च विन्यासं निर्मातुं भवान् एतेषां वर्गानां प्रायः कस्यापि संयोजनस्य उपयोगं कर्तुं शक्नोति ।
वर्गाणां प्रत्येकं स्तरः स्केल अप भवति, अर्थात् यदि भवान् md, lg तथा xl इत्येतयोः कृते समानविस्ताराणि सेट् कर्तुं योजनां करोति तर्हि भवान् केवलं md निर्दिष्टुं आवश्यकम् अस्ति ।
मिश्रित: मोबाइल, टैबलेट, तथा डेस्कटॉप
नालिकानि
वर्गैः सह .gx-*क्षैतिजनालिकानां समायोजनं कर्तुं शक्यते ।
.col.gx-4नालिकाभिः
सह
.col.gx-4नालिकाभिः
सह
.col.gx-4नालिकाभिः
सह
.col.gx-4नालिकाभिः
सह
.col.gx-4नालिकाभिः
सह
.col.gx-4नालिकाभिः
सह
.gy-*ऊर्ध्वाधर-नालिकानां नियन्त्रणार्थं वर्गानां उपयोगं कुर्वन्तु ।
.col.gy-4नालिकाभिः
सह
.col.gy-4नालिकाभिः
सह
.col.gy-4नालिकाभिः
सह
.col.gy-4नालिकाभिः
सह
.col.gy-4नालिकाभिः
सह
.col.gy-4नालिकाभिः
सह
वर्गैः सह .g-*उभयदिशि नालिकानां समायोजनं कर्तुं शक्यते ।
.col.g-3नालिकाभिः
सह
.col.g-3नालिकाभिः
सह
.col.g-3नालिकाभिः
सह
.col.g-3नालिकाभिः
सह
.col.g-3नालिकाभिः
सह
.col.g-3नालिकाभिः
सह
पात्राणि
Bootstrap v4.4 इत्यस्मिन् योजिताः अतिरिक्तवर्गाः तान् पात्रान् अनुमन्यन्ते ये 100% विस्तृताः सन्ति, विशेषविच्छेदबिन्दुपर्यन्तं । v5 नूतनं xxlब्रेकपॉइण्ट् योजयति।