شبکه بندی مخلوط مبایل و رایانه
سیستم شبکه بندی بوتسترپ شامل 4 کلاس می باشد: xs(مبایل ها) و sm(تبلت ها) و md(رایانه های رومیزی) و lg(رایانه های رومیزی بزرگ). این کلاس ها می توانند با یکدیگر ترکیب شوند تا بتوان طرح بندی های داینامیک و قابل انعطاف را ایجاد کرد.
نکته: مقیاس هر کلاس افزایش می یابد، بنابراین اگر می خواهید یک عرض یکسان برای کلاس های xs و sm داشته باشید، تنها نیاز دارید تا کلاس xs را تعریف کنید.
مثال (مثال های شبکه بندی بوتسترپ)
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
خودتان امتحان کنید »
 | توجه داشته باشید که تعداد ستون های شبکه بندی برای هر ردیف 12 عدد می باشد. در صورتی که بیش از 12 ستون تعریف شود، ستون ها بدون توجه به منطقه ی دید(viewport) دسته بندی خواهند شد. |
|---|
