بوٽ اسٽريپ گرڊ جا مثال

بنيادي گرڊ ترتيبون توهان کي بوٽ اسٽريپ گرڊ سسٽم اندر تعمير ڪرڻ کان واقف ڪرڻ لاءِ.

پنج گرڊ درجي

بوٽ اسٽريپ گرڊ سسٽم جا پنج درجا آهن، هڪ هر رينج جي ڊوائيسز لاءِ جنهن کي اسان سپورٽ ڪريون ٿا. هر ٽائر گهٽ ۾ گهٽ ڏيک پورٽ جي سائيز تي شروع ٿئي ٿو ۽ خودڪار طور تي وڏين ڊوائيسز تي لاڳو ٿئي ٿو جيستائين مٿي نه ڪيو وڃي.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
col-md-4
col-md-4
col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
col-xl-4
col-xl-4
col-xl-4

ٽي برابر ڪالمن

حاصل ڪريو ٽي برابر ويڪرو ڪالمن ڊيسڪٽاپس تي شروع ٿيندڙ ۽ وڏي ڊيسڪ ٽاپ تي اسڪيلنگ . موبائيل ڊوائيسز تي، ٽيبلٽس ۽ هيٺيان، ڪالمن پاڻمرادو اسٽيڪ ٿي ويندا.

col-md-4
col-md-4
col-md-4

ٽي غير مساوي ڪالمن

ڊيسڪٽاپس تي شروع ٿيندڙ ٽي ڪالمن حاصل ڪريو ۽ مختلف ويڪر جي وڏي ڊيسڪٽاپس تائين اسڪيلنگ ڪريو. ياد رکو، گرڊ ڪالمن کي هڪ افقي بلاڪ لاء ٻارهن تائين شامل ڪرڻ گهرجي. ان کان وڌيڪ، ۽ ڪالمن کي اسٽيڪ ڪرڻ شروع ڪيو ويو آهي، ڏسڻ واري پورٽ جي ڪا به اهميت ناهي.

col-md-3
col-md-6
col-md-3

ٻه ڪالمن

ڊيسڪٽاپس تي شروع ٿيندڙ ٻه ڪالمن حاصل ڪريو ۽ وڏي ڊيسڪ ٽاپ تي اسڪيلنگ ڪريو .

col-md-8
col-md-4

مڪمل ويڪر، اڪيلو ڪالمن

مڪمل چوٽي عناصر لاءِ گرڊ ڪلاس ضروري نه آھن.


ٻه ڪالمن سان گڏ ٻه نسٽڊ ڪالمن

دستاويزن جي مطابق، nesting آسان آهي - صرف ڪالمن جي هڪ قطار کي موجوده ڪالمن ۾ رکو. هي توهان کي ڏي ٿو ٻه ڪالم شروع ٿيندڙ ڊيسڪٽاپس تي ۽ وڏي ڊيسڪ ٽاپ تي اسڪيلنگ ، ٻئي ٻه (برابر ويڪر) وڏي ڪالمن ۾.

موبائيل ڊيوائس جي سائيز، ٽيبليٽس ۽ هيٺ، اهي ڪالمن ۽ انهن جي نيسٽ ٿيل ڪالمن کي اسٽيڪ ڪندو.

col-md-8
col-md-6
col-md-6
col-md-4

مخلوط: موبائل ۽ ڊيسڪ ٽاپ

Bootstrap v4 گرڊ سسٽم ۾ پنج درجا طبقا آهن: xs (اضافي ننڍو)، sm (ننڍو)، md (وچولي)، lg (وڏو)، ۽ xl (اضافي وڏو). وڌيڪ متحرڪ ۽ لچڪدار ترتيب ٺاهڻ لاءِ توهان انهن طبقن جي تقريبن ڪنهن به ميلاپ کي استعمال ڪري سگهو ٿا.

طبقن جو هر درجو اسڪيل اپ، مطلب ته جيڪڏهن توهان xs ۽ sm لاءِ ساڳي ويڪر قائم ڪرڻ جو منصوبو ٺاهيو ٿا، توهان کي صرف xs جي وضاحت ڪرڻ جي ضرورت آهي.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

مخلوط: موبائل، ٽيبليٽ، ۽ ڊيسڪ ٽاپ

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4