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

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

انهن مثالن ۾ .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 v5 گرڊ سسٽم جا ڇهه درجا طبقن وارا آهن: xs (اضافي ننڍو، هي ڪلاس انفڪس استعمال نه ڪيو ويو آهي)، sm (ننڍو)، md (وچولي)، lg (وڏو)، xl (x-وڏو)، ۽ xxl (xx). - وڏو). وڌيڪ متحرڪ ۽ لچڪدار ترتيب ٺاهڻ لاءِ توهان انهن طبقن جي تقريبن ڪنهن به ميلاپ کي استعمال ڪري سگهو ٿا.

طبقن جو هر درجو وڌايو وڃي ٿو، مطلب ته جيڪڏهن توهان md، lg، xl ۽ xxl لاءِ ساڳي ويڪر قائم ڪرڻ جو منصوبو ٺاهيو ٿا، توهان کي صرف 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
ڪنٽينر- سيال