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

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

انهن مثالن ۾ .themed-grid-colڪلاس کي ڪالمن ۾ شامل ڪيو ويو آهي ڪجهه موضوع شامل ڪرڻ لاءِ. هي هڪ ڪلاس نه آهي جيڪو بوٽ اسٽراپ ۾ ڊفالٽ طور موجود آهي.

پنج گرڊ درجي

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

.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 (اضافي وڏو). وڌيڪ متحرڪ ۽ لچڪدار ترتيب ٺاهڻ لاءِ توهان انهن طبقن جي تقريبن ڪنهن به ميلاپ کي استعمال ڪري سگهو ٿا.

طبقن جو هر درجو وڌايو وڃي ٿو، مطلب ته جيڪڏهن توهان md، lg ۽ xl لاءِ ساڳي ويڪر قائم ڪرڻ جو منصوبو ٺاهيو ٿا، توهان کي صرف md بيان ڪرڻ جي ضرورت آهي.

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-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

ڪنٽينر

Bootstrap v4.4 ۾ شامل ڪيل اضافي ڪلاس ڪنٽينرز کي اجازت ڏين ٿا جيڪي 100% ويڪرا آھن ھڪ خاص بريڪ پوائنٽ تائين.

.ڪنٽينر
ڪنٽينر- ايس ايم
.ڪنٽينر- ايم ڊي
ڪنٽينر- ايل جي
.container-xl
ڪنٽينر- سيال