مثال های شبکه بندی در بوت استرپ
در زیر چند مثال از سیستم شبکه بندی بوت استرپ آورده شده است:
سه ستون مساوی
مثال زیر نشان می دهد که چطور سه ستون با عرض برابر را، با شروع مقیاس از تبلت ها تا دستگاه های بزرگ، ایجاد کنیم. بر روی موبایل ها،ستون ها به طور اتوماتیک دسته بندی می شوند:
مثال (مثال های شبکه بندی بوت استرپ)
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
خودتان امتحان کنید »
سه ستون نامساوی
مثال زیر نشان می دهد که چطور سه ستون با عرض مختلف را، با شروع مقیاس از تبلت ها تا دستگاه های بزرگ، ایجاد کنیم:
مثال (مثال های شبکه بندی بوت استرپ)
<div class="col-sm-3">.col-md-3</div>
<div class="col-sm-6">.col-md-6</div>
<div class="col-sm-3">.col-md-3</div>
</div>
خودتان امتحان کنید »
دو ستون نامساوی
مثال زیر نشان می دهد که چطور دو ستون با عرض مختلف را، با شروع مقیاس از تبلت ها تا دستگاه های بزرگ ایجاد کنیم:
مثال (مثال های شبکه بندی بوت استرپ)
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
خودتان امتحان کنید »
دو ستون به همراه دو ستون تو در تو
مثال زیر نشان می دهد که چطور دو ستون را، با شروع مقیاس از تبلت ها تا دستگاه های بزرگ ایجاد کنیم به طوری که دو ستون دیگر(با عرض برابر) در داخل ستون بزرگتر باشند. (در موبایل، این ستون ها و ستون های تو در تو به طور اتوماتیک دسته بندی خواهند شد).
مثال (مثال های شبکه بندی بوت استرپ)
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
خودتان امتحان کنید »
مخلوط: مبایل و رایانه
سیستم شبکه بندی بوتسترپ شامل 4 کلاس می باشد: xs( برای موبایل ها) و sm( برای تبلت ها) و md( برای رایانه های رومیزی) و lg( برای رایانه های رومیزی بزرگ). این کلاس ها می توانند با یکدیگر ترکیب شوند تا بتوان طرح بندی های داینامیک و قابل انعطاف را ایجاد کرد.
نکته: مقیاس هر کلاس افزایش می یابد، بنابراین اگر می خواهید یک عرض یکسان برای کلاس های xs و sm داشته باشید، تنها نیاز دارید تا کلاس xs را تعریف کنید.
مثال (مثال های شبکه بندی بوت استرپ)
<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) دسته بندی خواهند شد. |
مخلوط : مبایل و تبلت و رایانه
مثال (مثال های شبکه بندی بوت استرپ)
<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
خودتان امتحان کنید »
حذف شناور بودن
برای اجتناب از بسته بندی عجیب و ناهموار می توانید از کلاس clearfix استفاده کنید:
مثال (مثال های شبکه بندی بوت استرپ)
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
خودتان امتحان کنید »
جبران ستون ها
می توان با استفاده از کلاس .col-md-offset-* ستون ها را به سمت راست متمایل کرد. این کلاس ها margin سمت چپ را از یک ستون به وسیله ی ستون های * افزایش می دهد:
مثال (مثال های شبکه بندی بوت استرپ)
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
خودتان امتحان کنید »
فشار دادن و کشیدن-تغییر دادن ترتیب ستون ها
می توانیم با استفاده از کلاس های .col-md-push-* و .col-md-pull-* ترتیب ستون های شبکه بندی را تغییر دهیم:
مثال (مثال های شبکه بندی بوت استرپ)
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 13053