مثالهای مختلف سیستم Grid در بوت استرپ

[saeed410]

در قسمت قبل سیستم شبکه بندی در بوت استرپ را مورد بحث و بررسی قرار دادیم. در این قسمت مثالهای بیشتری از سیستم شبکه بندی میزنیم تا با نحوه کار بیشتر آشنا شوید.در تمام مثالهای زیر باید کد نوشته شده را داخل کلاس container یا container-fluid قرار دهیم:
[h=2]1- سه ستون برابر :[/h] در کد زیر ما سه ستون با هم برابر در تبلت ها ایجاد میکنیم. در دستگاههای بزرگتر از تبلت اندازه ستون ها با همان ضریب بزرگتر میشود.ودر دستگاهای بسیار کوچک یا موبایل که کمتر از 768 پیکسل عرض دارند ؛ تمام ستون ها به صورت پشته و در روی هم قرار میگیرند.

<div class="row">
<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>​

[h=2]2- سه ستون نابرابر[/h] در کد زیر سه ستون ایجاد میشود که عرض های مختلفی دارند. این ستون ها برای تبلت ترازبندی شده اند. همچنین در دستگاههای بزرگتر به همان نسبت بزرگ میشوند. در دستگاهای بسیار کوچک به صورت خودکار تمام ستون ها به صورت پشته روی هم قرار میگیرند.

<div class="row">
<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>​

[h=2]3- دو ستون نابرابر[/h] در کد زیر دو ستون نابرابر ایجاد کرده ایم که برای تبلت ترازبندی شده اند و در دستگاههای بزرگتر به همان نسبت تغییر پیدا میکنند. همچنین در موبایل به صورت خودکار به صورت پشته روی هم قرار میگیرند.

<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>​

[h=2]4- دو ستون نابرابر به صورت سلسله مراتبی (تودرتو)[/h] در کد زیر دو ستون برای دستگاه تبلت با اندازه ها 4 و 8 تعریف شده است. همچنین در داخل ستونی که اندازه 8 دارد دو ستون دیگر تعریف کردیم. هر ستون بعد از تقسیم خود به 12 قسمت مساوی تقسیم میشود. این اندازه ها برای تبلت ترازبندی شده اند و در دستگاههای بزرگتر به همان نسبت تغییر پیدا مکینند. همچنین در موبایل به صورت خودکار به صورت پشته روی هم قرار میگیرند:

<div class="row">
<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>
​

[h=2]5- ترکیبی : موبایل و دسکتاپ :[/h]

• سیستم شبکه بندی در بوت استرپ 4 نوع کلاس دارد : xs برای دستگاههای موبایل ، sm برای تبلت ، md دسکتاپ و lg دسکتاپ های بزرگ. از این کلاسها میتوانید به صورت ترکیبی استفاده کنید. در این صورت قالب شما دارای سازگاری و انعطاف پذیری بالایی خواهد بود.

• نکته : هر کلاس به همان نسب در کلاس های بزرگتر خود ایجاد میشود. به عبارت دیگر اگر شما میخواهید ستونی با اندازه 6 در دستگاههای sm داشته باشید و همین ستون در دستگاههای md نیز با اندازه 6 است ؛ کافی است فقط از کلاس col-sm-6 استفاده کنید. در این حالت اگر از کلاس md استفاده نکنید به همان نسبت در دستگاه بزرگتر ایجاد میشود:

<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>​

[h=2]6- ترکیبی : موبایل ، تبلت ، و دسکتاپ :[/h]

<div class="row">
<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>​

[h=2]7- کلاس clearfix :[/h] از این کلاس برای پاک کردن و نال کردن مقدار float مربوط به div ها استفاده میشود. در مثال زیر 4 ستون هم اندازه در دستگاههای کوچک داریم. که اندازه هر ستون در دستگاههای sm برابر با 3 است. میخواهیم این 4 ستون را به صورتی قرار دهیم که در دستگاههای موبایل xs هر دو ستون در یک سطر قرار بگیرند. در این حالت از یک div با کلاس clearfix استفاده کرده ایم. همچنین به دلیل اینکه میخواهیم این تگ فقط برای دستگاههای موبایل اجرا شود از کلاس visible-xs برای نمایانی این تگ فقط در دستگاههای xs استفاده کرده ایم:

<div class="row">
<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>​

• نکته : کلاس visible-device را میتوانید در 4 نوع نمایشگر استفاده کنید. از این کلاس برای نمایانی فقط در کلاس نام برده استفاده میشود. به عنوان مثال اگر میخواهید یک تگ فقط در دستگاههای xs نمایش داده شود این کلاس را به تگ خود اضافه کنید:visible-xs در صورتی که میخواهید علاوه بر دستگاههای xs در دستگاههای md نیز نمایش داده شود این کلاس را نیز میتوانید به صورت ترکیبی استفاده کنید : visible-md

[h=2]8- جابجاسازی یا Offsetting به ستون ها :[/h] برای جابجا کردن یک ستون از کلاس .col-md-offset-device استفاده میشود. که به جای device میتوانید مقادیر xs,sm,md,lg را قرار دهید. در کد زیر دو ستون با اندازه های 5 در دستگاههای sm ایجاد کرده ایم. در اینجا میخواهیم یکی از ستونها در دستگاههای sm 2 واحد جابجا شود. کد این مثال به صورت زیر است :

<div class="row">
<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>​

برای درک بهتر مثال روی این دکمه کلیک کنید و صفحه مرورگر خود را تغییر اندازه دهید.
[h=2]9 - تغییر ترتیب قرار گیری ستونها[/h] برای تغییر ترتیب ستون ها میتوانید از کلاسهای col-device-push-span و col-device-pull-span استفاده کنید. برای درک بهتر کد زیر را بتویسید و اجرا کنید .یا دموی آنلاین آنرا مشاهده کنید.

<div class="row">
<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>​

در گروه: بوت استرپ و CSS
منبع : طراحی سایت -سیستم grid در بوت استرپ