बूटस्ट्रैप जाल उदाहरण

Bootstrap जालप्रणाल्याः अन्तः निर्माणेन परिचितं कर्तुं मूलभूतजालविन्यासाः ।

एतेषु उदाहरणेषु .themed-grid-colकिञ्चित् विषयवस्तुं योजयितुं स्तम्भेषु वर्गः योजितः भवति । एषः वर्गः नास्ति यः पूर्वनिर्धारितरूपेण Bootstrap मध्ये उपलभ्यते ।

पञ्च जालस्तराः

Bootstrap grid system इत्यस्य पञ्च स्तराः सन्ति, वयं समर्थितानां प्रत्येकस्य उपकरणानां श्रेणीयाः कृते एकं । प्रत्येकं स्तरं न्यूनतमदृश्यपोर्ट् आकारेण आरभ्यते तथा च स्वयमेव बृहत्तरयन्त्रेषु प्रवर्तते यावत् अधिलिखितं न भवति ।

.कोल-४
.कोल-४
.कोल-४
.कोल-स्म-४
.कोल-स्म-४
.कोल-स्म-४
.कोल-मद्-४
.कोल-मद्-४
.कोल-मद्-४
.कोल-लग-४
.कोल-लग-४
.कोल-लग-४
.कोल-क्सल-४
.कोल-क्सल-४
.कोल-क्सल-४

त्रयः समानस्तम्भाः

डेस्कटॉप् तः आरभ्य बृहत् डेस्कटॉप् मध्ये स्केल कृत्वा त्रीणि समानविस्तारयुक्तानि स्तम्भानि प्राप्नुवन्तु . चलयन्त्रेषु, टैब्लेट्-मध्ये, अधः च स्तम्भाः स्वयमेव स्तम्भिताः भविष्यन्ति ।

.कोल-मद्-४
.कोल-मद्-४
.कोल-मद्-४

त्रयः असमानस्तम्भाः

डेस्कटॉप् इत्यस्मात् आरभ्य विविधविस्तारस्य बृहत् डेस्कटॉप् यावत् स्केल कृत्वा त्रीणि स्तम्भानि प्राप्नुवन्तु । स्मर्यतां, एकस्य क्षैतिजखण्डस्य कृते जालस्तम्भाः द्वादशपर्यन्तं योजयितव्याः । तस्मात् अधिकं, स्तम्भाः च viewport किमपि न भवतु स्तम्भनं आरभन्ते ।

.कोल-मद्-३
.कोल-मद्-६
.कोल-मद्-३

द्वौ स्तम्भौ

डेस्कटॉप् मध्ये आरभ्य बृहत् डेस्कटॉप् मध्ये स्केल कृत्वा द्वौ स्तम्भौ प्राप्नुवन्तु |

.कोल-मद्-८
.कोल-मद्-४

पूर्ण चौड़ाई, एकल स्तम्भ

पूर्णविस्तारयुक्तानां तत्त्वानां कृते कोऽपि जालवर्गः आवश्यकः नास्ति ।


द्वौ स्तम्भौ द्वौ नीडस्तम्भौ सह

दस्तावेजीकरणस्य अनुसारं, नेस्टिंग् सुलभम् अस्ति-मात्रं विद्यमानस्य स्तम्भस्य अन्तः स्तम्भानां पङ्क्तिं स्थापयन्तु । एतेन भवन्तः डेस्कटॉप् तः आरभ्य बृहत् डेस्कटॉप् मध्ये स्केल कृत्वा द्वौ स्तम्भौ ददाति , बृहत्तरस्य स्तम्भस्य अन्तः अन्यौ द्वौ (समानविस्तारौ) सह ।

चलयन्त्रस्य आकारेषु, टैब्लेट्-मध्ये, अधः च एते स्तम्भाः तेषां नेस्टेड्-स्तम्भाः च स्तम्भयिष्यन्ति ।

.कोल-मद्-८
.कोल-मद्-६
.कोल-मद्-६
.कोल-मद्-४

मिश्रित: मोबाइल एवं डेस्कटॉप

Bootstrap v4 ग्रिड् प्रणाल्यां पञ्चवर्गाणां स्तराः सन्ति: xs (अतिरिक्तं लघु, एषः वर्गः इन्फिक्स् न उपयुज्यते), sm (लघु), md (मध्यमम्), lg (बृहत्), xl (अतिरिक्तं बृहत्) च । अधिकगतिशीलं लचीलं च विन्यासं निर्मातुं भवान् एतेषां वर्गानां प्रायः कस्यापि संयोजनस्य उपयोगं कर्तुं शक्नोति ।

वर्गाणां प्रत्येकं स्तरः स्केल अप भवति, अर्थात् यदि भवान् md, lg तथा xl इत्येतयोः कृते समानविस्ताराणि सेट् कर्तुं योजनां करोति तर्हि भवान् केवलं md निर्दिष्टुं आवश्यकम् अस्ति ।

.कोल-मद्-८
.कोल-६ .कोल-मद्-४
.कोल-६ .कोल-मद्-४
.कोल-६ .कोल-मद्-४
.कोल-६ .कोल-मद्-४
.कोल-६
.कोल-६

मिश्रित: मोबाइल, टैबलेट, तथा डेस्कटॉप

.कोल-स्म-६ .कोल-लग-८
.कोल-६ .कोल-लग-४
.कोल-६ .कोल-स्म-४
.कोल-६ .कोल-स्म-४
.कोल-६ .कोल-स्म-४

पात्राणि

Bootstrap v4.4 इत्यस्मिन् योजिताः अतिरिक्तवर्गाः तान् पात्रान् अनुमन्यन्ते ये 100% विस्तृताः सन्ति, ते विशेषविच्छेदबिन्दुपर्यन्तं भवन्ति ।

.पात्रम्
.पात्र-सं
.पात्र-मद्
.पात्र-लग
.पात्र-xl
.पात्र-द्रवः