سیستەمی تۆڕی پێشوەختە کە وەک بەشێک لە Bootstrap دابین کراوە تۆڕێکی 940px پان و 12 ستوونە .

هەروەها چوار جۆری وەڵامدەرەوەی هەیە بۆ ئامێر و ڕوونییە جیاوازەکان: مۆبایل، پۆرترێتی تابلێت، دیمەنی مێز و دەسکتۆپی بچووک، و دەسکتۆپی گەورەی شاشە فراوان.

<div class = "ڕیز" > 
  <div پۆل = "span4" > ... </div> 
  <div پۆل = "span8" > ... </div> 
</div>

وەک لێرەدا نیشان دراوە، دەتوانرێت نەخشەیەکی بنەڕەتی بە دوو "ستوون" دروست بکرێت، هەریەکەیان ژمارەیەک لەو ١٢ ستوونە بنەڕەتییە دەگرێتەوە کە وەک بەشێک لە سیستەمی تۆڕەکەمان پێناسەمان کردووە.

بە سیستەمی تۆڕی ئیستاتیک (نا شلە) لە Bootstrap، هێلانەکردن ئاسانە. بۆ هێلانەکردنی ناوەڕۆکەکەت، تەنها ستوونێکی نوێ .rowو کۆمەڵێک ستوون زیاد بکە لەناو ستوونێکی .span*هەبوودا ..span*

نموونە

ڕیزەکانی هێلانەکراو دەبێت کۆمەڵێک ستوون لەخۆ بگرن کە کۆدەبنەوە بۆ ژمارەی ستوونەکانی باوکی. بۆ نموونە دوو .span3ستوونی هێلانەکراو دەبێ لەناو یەکێکدا دابنرێت .span6.

<div class = "ڕیز" > 
  <div پۆل = "span12" > 
    ئاستی یەکەمی ستوونی
    <div class = "ڕیز" > 
      <div class = "span6" > ئاستی دووەم </div> 
      <div class = "span6" > ئاستی دووەم </div> 
    </div>
  </div>
</div>

لەسەدا نەک پێکسڵ

سیستەمی تۆڕی شلە لەبری پێکسڵی جێگیر لەسەدا بۆ پانایی ستوونەکان بەکاردەهێنێت. هەروەها هەمان گۆڕانکاری وەڵامدەرەوەی هەیە وەک سیستەمی تۆڕی جێگیرمان، دڵنیای دەدات لە ڕێژەی دروست بۆ ڕوونی شاشەی کلیل و ئامێرەکان.

ڕیزەکانی شلە

هەر ڕیزێک بە سادەیی بە گۆڕینی .rowبۆ .row-fluid. ستوونەکان بە تەواوی وەک خۆیان دەمێننەوە، وا دەکات کە سوپەر ڕاست بێت بۆ وەرچەرخان لە نێوان نەخشە جێگیر و شلەکان.

مارکاپ

<div class = "شلەی ڕیز" > 
  <div پۆل = "span4" > ... </div> 
  <div پۆل = "span8" > ... </div> 
</div>

هێلانەکردن بە تۆڕە شلەکان کەمێک جیاوازە: ژمارەی ستوونە هێلانەکراوەکان پێویست ناکات لەگەڵ دایک و باوکدا بگونجێت. بەڵکو ستوونەکانت لە هەر ئاستێکدا ڕێست دەکرێنەوە چونکە هەر ڕیزێک 100% ستوونی باوک دەگرێتەوە.

<div class = "شلەی ڕیز" > 
  <div پۆل = "span12" > 
    ئاستی یەکەمی ستوونی
    <div class = "شلەی ڕیز" > 
      <div class = "span6" > ئاستی دووەم </div> 
      <div class = "span6" > ئاستی دووەم </div> 
    </div>
  </div>
</div>

گۆڕاوەکان لە LESS

لەناو Bootstrapدا مشتێک گۆڕاو بۆ خۆکارکردنی سیستەمی تۆڕی پێشوەختەی 940px دروستکراوە، کە لە سەرەوە بەڵگەی لەسەر کراوە. هەموو گۆڕاوەکان بۆ تۆڕەکە لە گۆڕاوەکاندا هەڵدەگیرێن.less.

چۆنێتی خۆکارکردن

دەستکاریکردنی تۆڕەکە واتە گۆڕینی سێ @grid*گۆڕاوەکە و دووبارە کۆکردنەوەی Bootstrap. گۆڕاوە تۆڕەکان لە variables.less بگۆڕە و یەکێک لە چوار ڕێگای بەڵگەدار بەکاربهێنە بۆ دووبارە کۆکردنەوە . ئەگەر ستوونی زیاتر زیاد دەکەیت، دڵنیابە CSS زیاد دەکەیت بۆ ئەوانەی لە grid.lessدان.

مانەوە بە وەڵامدەرەوە

خۆکارکردنی تۆڕەکە تەنها لە ئاستی پێشوەختەدا کاردەکات، تۆڕی 940px. بۆ پاراستنی لایەنە وەڵامدەرەوەکانی Bootstrap، هەروەها دەبێت تۆڕەکان لە responsive.lessدا خۆت ڕێکبخەیت.

نەخشەی جێگیر کراوە

شێوازی پێشوەختە و سادە بە فراوانی 940px، ناوەنددار بۆ تەنها نزیکەی هەر ماڵپەڕێک یان لاپەڕەیەک کە لەلایەن تاکە لاپەڕەیەکەوە دابینکراوە <div class="container">.

<جەستە>
  <div class = "دەفر" > 
    ...
  </div>
</body>

شێوازی شلە

<div class="container-fluid">پێکهاتەی لاپەڕەی نەرم و نیان دەدات، کەمترین و زۆرترین پانایی، و پەڕەیەکی لایەنی دەستی چەپ. بۆ ئەپ و دۆکەکان زۆر باشە.

<div class = "شلەی دەفر" > 
  <div class = "شلەی ڕیز" > 
    <div پۆل = "span2" > 
      <!--ناوەڕۆکی پەڕە لاوەکییەکان-->
    </div>
    <div پۆل = "span10" > 
      <!--ناوەڕۆکی جەستە-->
    </div>
  </div>
</div>

ئامێره‌ پشتگیریكراوه‌كان

بووتستراپ پشتگیری لە مشتێک پرسیاری میدیا دەکات لە یەک فایلدا بۆ یارمەتیدان لە گونجاوترکردنی پڕۆژەکانت لەسەر ئامێرە جیاوازەکان و ڕوونی شاشە. لێرەدا ئەوەی لەخۆدەگرێت:

پێویستی بە مێتا تاگی هەیە

بۆ دڵنیابوون لەوەی ئامێرەکان لاپەڕە وەڵامدەرەوەکان بە باشی پیشان دەدەن، تاگی مێتا دەروازەی بینین لەخۆ بگرە.

<meta name = "viewport" ناوەڕۆک = "پانی=پانی-ئامێر، پێوەر-سەرەکی=1.0" >  

ئەوەی ئەوان دەیکەن

پرسیارەکانی میدیا ڕێگە بە CSSی تایبەت دەدەن بە پشتبەستن بە ژمارەیەک مەرج- ڕێژە، پانایی، جۆری پیشاندانی، هتد- بەڵام بەزۆری لە دەوری min-widthو تەرکیز دەکات max-width.

• دەستکاری پانایی ستوونی ناو تۆڕەکەمان بکە
• لەبری ئەوەی پێویست بێت توخمەکان کۆبکەرەوە
• قەبارەی سەردێڕ و دەق بگۆڕە بۆ ئەوەی زیاتر بۆ ئامێرەکان بگونجێت

Bootstrap بە شێوەیەکی ئۆتۆماتیکی ئەم پرسیارە میدیایانە لەخۆناگرێت، بەڵام تێگەیشتن و زیادکردنیان زۆر ئاسانە و پێویستی بە کەمترین ڕێکخستن هەیە. چەند بژاردەیەکت هەیە بۆ خستنەڕووی تایبەتمەندییە وەڵامدەرەکانی Bootstrap:

1. وەشانی وەڵامدەرەوەی کۆکراوە بەکاربهێنە، bootstrap-responsive.css
2. @import "responsive.less" زیاد بکە و Bootstrap دووبارە کۆبکەرەوە
3. دەستکاریکردن و دووبارە کۆکردنەوەی responsive.less وەک فایلێکی جیاواز

بۆچی تەنها نەیخەینە ناوەوە؟ ڕاستی بڵێم، پێویست ناکات هەموو شتێک وەڵامدەرەوە بێت. لەبری ئەوەی هانی گەشەپێدەران بدەین بۆ لابردنی ئەم تایبەتمەندییە، ئێمە باشتر وایە چالاکی بکەین.

  // مۆبایلەکانی لاندسکەیپ و داون
  @media ( زۆرترین پانایی : 480px ) { ... } _     
 
  // مۆبایلی لاندسکەیپ بۆ تابلێتی پۆرترێت
  @media ( زۆرترین پانایی : 768px ) { ... } _     
 
  // تابلێتی پۆرترێت بۆ لاندسکەیپ و دەسکتۆپ
  @media ( کەمترین پانی : 768px ) و ( زۆرترین پانی : 980px ) { ... } . _        
 
  // دەسکتۆپی گەورە
  @media ( کەمترین پانی : 1200px ) { .. } .