Bootstrap جي حصي طور مهيا ڪيل ڊفالٽ گرڊ سسٽم هڪ 940px-وائڊ، 12-کالم گرڊ آهي.

ان ۾ مختلف ڊوائيسز ۽ قراردادن لاءِ چار جوابي تبديليون پڻ آهن: فون، ٽيبليٽ پورٽريٽ، ٽيبل لينڊ اسڪيپ ۽ ننڍڙا ڊيسڪٽاپس، ۽ وڏا وائڊ اسڪرين ڊيسڪٽاپس.

<div ڪلاس = "قطار" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

جيئن ته هتي ڏيکاريل آهي، هڪ بنيادي ترتيب ٺاهي سگهجي ٿي ٻن "ڪالمن" سان، هر هڪ 12 بنيادي ڪالمن جي تعداد ۾ پکڙيل آهي جنهن کي اسان اسان جي گرڊ سسٽم جي حصي طور بيان ڪيو آهي.

بوٽ اسٽريپ ۾ جامد (غير سيال) گرڊ سسٽم سان، nesting آسان آهي. توهان جي مواد کي گهيرو ڪرڻ لاء، صرف هڪ موجوده ڪالمن ۾ ڪالمن .rowجو هڪ نئون ۽ سيٽ شامل ڪريو ..span*.span*

مثال

<div ڪلاس = "قطار" > 
  <div class = "span12" > 
    ڪالمن جي سطح 1
    <div ڪلاس = "قطار" > 
      <div class = "span6" > ليول 2 </div> 
      <div class = "span6" > ليول 2 </div> 
    </div>
  </div>
</div>

گھٽ ۾ متغير

Bootstrap ۾ ٺاهيل ڊفالٽ 940px گرڊ سسٽم کي ترتيب ڏيڻ لاءِ مٿس متغير آهن، مٿي ڏنل دستاويز. گرڊ لاءِ سڀئي متغير variables.less ۾ محفوظ ٿيل آهن.

ڪسٽمائيز ڪيئن ڪجي

گرڊ کي تبديل ڪرڻ جو مطلب آهي ٽن @grid*متغيرن کي تبديل ڪرڻ ۽ بوٽ اسٽراپ کي ٻيهر ترتيب ڏيڻ. گرڊ متغير کي variables.less ۾ تبديل ڪريو ۽ استعمال ڪريو چار طريقن مان ھڪڙو دستاويز ڪيل دستاويز کي ٻيهر ٺاھڻ لاء . جيڪڏھن توھان وڌيڪ ڪالم شامل ڪري رھيا آھيو، پڪ ڪريو ته انھن لاءِ سي ايس ايس شامل ڪريو grid.less ۾.

جوابدار رهڻ

گرڊ جي ڪسٽمائيزيشن صرف ڊفالٽ سطح تي ڪم ڪري ٿي، 940px گرڊ. Bootstrap جي جوابي پهلوئن کي برقرار رکڻ لاءِ، توهان کي به گرڊ کي ترتيب ڏيڻو پوندو Responsive.less ۾.

مقرر ٿيل ترتيب

ڊفالٽ ۽ سادو 940px-وائڊ، صرف ڪنهن به ويب سائيٽ يا صفحي جي لاءِ مرڪزي ترتيب هڪ واحد طرفان مهيا ڪيل آهي <div class="container">.

<جسم>
  <div class = "container" > 
    ...
  </div>
</body>

فلاڻي ترتيب

<div class="container-fluid">لچڪدار صفحي جي جوڙجڪ، گھٽ ۾ گھٽ ۽ وڌ ۾ وڌ ويڪر، ۽ کاٻي پاسي واري سائڊبار ڏئي ٿو. اهو ائپس ۽ دستاويزن لاء بهترين آهي.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--سائڊبار مواد-->
    </div>
    <div class = "span10" > 
      <!--جسماني مواد-->
    </div>
  </div>
</div>

سپورٽ ڊوائيسز

Bootstrap توهان جي منصوبن کي مختلف ڊوائيسز ۽ اسڪرين جي قراردادن تي وڌيڪ مناسب بڻائڻ ۾ مدد ڏيڻ لاء ميڊيا جي سوالن جي مدد ڪري ٿو. هتي جيڪي شامل آهن:

جيڪي ڪندا آھن

ميڊيا سوالن جي اجازت ڏئي ٿي ڪسٽم CSS جي بنياد تي ڪيترن ئي شرطن جي بنياد تي - تناسب، ويڪر، ڊسپلي قسم، وغيره - پر عام طور تي چوڌاري min-width۽ max-width.

• اسان جي گرڊ ۾ ڪالمن جي چوٽي کي تبديل ڪريو
• جتي ضروري هجي ته فلوٽ جي بدران عناصر کي اسٽيڪ ڪريو
• ڊوائيسن لاءِ وڌيڪ موزون ٿيڻ لاءِ عنوانن ۽ متن کي تبديل ڪريو

بوٽ اسٽريپ پاڻمرادو شامل نه ڪندو آهي اهي ميڊيا سوال، پر انهن کي سمجهڻ ۽ شامل ڪرڻ تمام آسان آهي ۽ گهٽ ۾ گهٽ سيٽ اپ جي ضرورت آهي. توھان وٽ ڪجھ اختيار آھن شامل ڪرڻ لاءِ Bootstrap جي جوابي خاصيتون:

1. مرتب ٿيل جوابي نسخو استعمال ڪريو، bootstrap-responsive.css
2. شامل ڪريو @import "responsive.less" ۽ بوٽ اسٽراپ کي ٻيهر گڏ ڪريو
3. responsive.less کي الڳ طور تبديل ڪريو ۽ ٻيهر ٺاھيو

ڇو نه صرف ان کي شامل ڪيو وڃي؟ سچ چيو وڃي، هر شيء کي جواب ڏيڻ جي ضرورت ناهي. ڊولپرز کي حوصلا افزائي ڪرڻ جي بدران هن خصوصيت کي هٽائڻ لاء، اسان ان کي فعال ڪرڻ لاء بهترين سمجهون ٿا.

  // نظارو فون ۽ هيٺ
  @ ميڊيا ( وڌ ۾ وڌ - ويڪر : 480px ) { ... }     
 
  // لينڊ اسڪيپ فون کان پورٽريٽ ٽيبليٽ
  @ ميڊيا ( وڌ ۾ وڌ - ويڪر : 768px ) { ... }     
 
  // پورٽريٽ ٽيبليٽ لينڊ اسڪيپ ۽ ڊيسڪ ٽاپ ڏانهن
  @ ميڊيا ( منٽ - ويڪر : 768px ) ۽ ( وڌ ۾ وڌ - ويڪر : 940px ) { ... }        
 
  // وڏي ڊيسڪ ٽاپ
  @ ميڊيا ( منٽ - ويڪر : 1200px ) { .. }