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

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

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

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

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

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

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

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

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

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

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

द्वौ स्तम्भौ

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

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

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

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


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

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

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

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

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

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

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

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

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

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