مثال های شبکه بندی در بوت استرپ
در زیر چند مثال از سیستم شبکه بندی بوت استرپ آورده شده است:
سه ستون مساوی
مثال زیر نشان می دهد که چطور سه ستون با عرض برابر را، با شروع مقیاس از تبلت ها تا دستگاه های بزرگ، ایجاد کنیم. بر روی موبایل ها،ستون ها به طور اتوماتیک دسته بندی می شوند:
مثال (مثال های شبکه بندی بوت استرپ)
<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>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 13319
دیدگاه‌ها
سلام وقت بخیر
برای شبکه بندی با بوت استرپ برای هر چهار تا حالت log , md ,sm,xm به سطر ها مقدار دادم ،
اما زمانی که عرض صفحه رو با موس کوچک میکنم تغییر میدم در یک سری عرض های صفحه علاوه بر اینکه سطر ها بهم میریزه دابوها فاصله شان نسبت بهم بهم میریزه و به هم میچسبن عکسش رو گذاشتم مشکل چیه
با سلام و تشکر.
خاطرنشان میکنم انجمن سایت بیاموز راه‌اندازی شد. از این پس می‌تونید با درج سؤال خود در انجمن از امکانات و تخصص سایر کاربران بهره‌مند شوید.
اما در مورد سؤالتون! دقت کنید عبارت xs برای دستگاه‌های خیلی کوچک، sm برای دستگاه‌های با سایز کوچک، md برای سایز متوسط و lg برای سایزهای بزرگ هست.زمانی که سایز صفحه رو کوچک می کنید، با توجه به سایز معمولا یکی از کلاسهای xs یا sm اعمال میشه.
اگر کدهای خودتون رو قرار بدید، راحت‌تر میشه فهمید مشکل از کجاست.
برای اینکار ترجیحاً از انجمن سایت به آدرس beyamooz.com/forum/ استفاده کنید. در انجمن امکانات متنوعی برای درج سؤال، از جمله درج کد وجود داره.