وباکا

آموزش تخصصی برنامه نویسی وب

با استفاده از بوت استرپ ، می توان صفحه را به سطرها و ستونهای دلخواهی تقسیم کرد. بوت استرپ یک روش جالب و قابل انعطاف برای این تقسیم بندی ارائه می کند. در بوت استرپ عرض هر سطر را 12 واحد در نظر می گیرند و این 12 واحد را به هر نسبتی می توان بین ستون ها تقسیم کرد.

روش شبکه بندی بوت استراپ صفحه را به 12 ستون تقسیم می کند. اگر تمایلی به استفاده از همه 12 ستون بصورت جداگانه نداشته باشید می توانید هر چندتا را با هم یک گروه در نظر گرفته و ستون ها عریض تری ایجاد کنید.

S12 S11 S10 S9 S8 S7 S6 S5 S4 S3 S2 S1
Span4 Span4 Span4
Span6 Span6
Span12

سیستم شبکه بندی بوت استراپ واکنش پذیر است و ستونها بصورت خودکار بر اساس عرض صفحه نمایش چیده می شوند.

کلاس های شبکه بندی بوت استرپ

سیستم شبکه بندی از چهار نوع کلاس زیر استفاده می کند:

کلاس مورد کاربرد
xs برای تلفن ها
sm برای تبلت ها
md برای رایانه های رومیزی
lg برای رایانه های رومیزی بزرگتر

کلاس های فوق می توانند بصورت ترکیبی برای ایجاد طرح های گویا و قابل انعطاف استفاده شوند:

<div class=”row”>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>

</div>

ابتدا یک سطر ایجاد می شود (<div class=”row”>) . سپس شماره دلخواهی از ستون ها (تگ هایی با کلاس col-*-* مناسب ). دقت کنید که جمع اعداد در .col-*-* برای هر سطر باید همیشه حداکثر 12 باشد. در زیر چند مثال از طرح های گرید در بوت استرپ نشان داده شده است.

.col-sm-4
.col-sm-4
.col-sm-4

مثال زیر نشان می دهد که چگونه سه ستون با عرض مساوی مناسب برای تبلت ها ساخته می شوند، عرض این ستون ها در رایانه های رومیزی، کشیده شده و در تلفن ها هم سه ستون بصورت خودکار زیر هم قرار می گیرند.

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

مثال زیر هم دو ستون با عرض نامساوی را ایجاد می کند.

<div class=”row”>
<div class=”col-sm-4″>.col-sm-4</div>
<div class=”col-sm-8″>.col-sm-8</div>
</div>

مطالب مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فهرست مطالب