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

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

انهن مثالن ۾ .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-xxl-4
col-xxl-4
col-xxl-4

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

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

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

ٽي برابر ڪالمن جو متبادل

طبقن کي استعمال ڪندي .row-cols-*، توهان آساني سان برابر ڪالمن سان گرڊ ٺاهي سگهو ٿا.

.colجو ٻار .row-cols-md-3
.colجو ٻار .row-cols-md-3
.colجو ٻار .row-cols-md-3

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

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

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

گٽر

طبقن سان .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وقفو پوائنٽ شامل ڪري ٿو.

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